From ef14c692986fd412c28104ebf7e5468d03008960 Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Fri, 9 Aug 2024 16:48:55 -0700
Subject: [PATCH 01/10] LF-4159 Commit component framework and story

Replication of AnimalDetails without unique card
---
 .../Animals/AddBatchDetails/index.tsx         | 98 +++++++++++++++++++
 .../Animals/Details/BatchDetails.stories.tsx  | 70 +++++++++++++
 2 files changed, 168 insertions(+)
 create mode 100644 packages/webapp/src/components/Animals/AddBatchDetails/index.tsx
 create mode 100644 packages/webapp/src/stories/Animals/Details/BatchDetails.stories.tsx

diff --git a/packages/webapp/src/components/Animals/AddBatchDetails/index.tsx b/packages/webapp/src/components/Animals/AddBatchDetails/index.tsx
new file mode 100644
index 0000000000..c6ed0ce3b2
--- /dev/null
+++ b/packages/webapp/src/components/Animals/AddBatchDetails/index.tsx
@@ -0,0 +1,98 @@
+/*
+ *  Copyright 2024 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 clsx from 'clsx';
+import GeneralDetails, { type GeneralDetailsProps } from '../AddAnimalsDetails/General';
+import OtherDetails, { type OtherDetailsProps } from '../AddAnimalsDetails/Other';
+import Origin, { type OriginProps } from '../AddAnimalsDetails/Origin';
+import ExpandableItem from '../../Expandable/ExpandableItem';
+import useExpandable from '../../Expandable/useExpandableItem';
+import { AnimalOrBatchKeys } from '../../../containers/Animals/types';
+import styles from '../AddAnimalsDetails/styles.module.scss';
+
+enum sectionKeys {
+  GENERAL,
+  ORIGIN,
+  OTHER,
+}
+
+export type BatchDetailsProps = {
+  generalDetailProps: Omit<GeneralDetailsProps, 't' | 'animalOrBatch'>;
+  otherDetailsProps: Omit<OtherDetailsProps, 't' | 'animalOrBatch'>;
+  originProps: Omit<OriginProps, 't'>;
+};
+
+const BatchDetails = ({
+  generalDetailProps,
+  otherDetailsProps,
+  originProps,
+}: BatchDetailsProps) => {
+  const { expandedIds, toggleExpanded } = useExpandable({ isSingleExpandable: true });
+  const { t } = useTranslation(['translation', 'common', 'animal']);
+  const commonProps = { t };
+
+  const sections = [
+    {
+      key: sectionKeys.GENERAL,
+      title: t('ADD_ANIMAL.GENERAL_DETAILS'),
+      content: (
+        <GeneralDetails
+          {...commonProps}
+          {...generalDetailProps}
+          animalOrBatch={AnimalOrBatchKeys.BATCH}
+        />
+      ),
+    },
+    {
+      key: sectionKeys.OTHER,
+      title: t('ADD_ANIMAL.OTHER_DETAILS'),
+      content: (
+        <OtherDetails
+          {...commonProps}
+          {...otherDetailsProps}
+          animalOrBatch={AnimalOrBatchKeys.BATCH}
+        />
+      ),
+    },
+    {
+      key: sectionKeys.ORIGIN,
+      title: t('ADD_ANIMAL.ORIGIN'),
+      content: <Origin {...commonProps} {...originProps} />,
+    },
+  ];
+
+  return (
+    <div className={styles.detailsWrapper}>
+      {sections.map(({ key, title, content }) => {
+        const isExpanded = expandedIds.includes(key);
+
+        return (
+          <div key={key} className={clsx(styles.section, isExpanded && styles.expanded)}>
+            <ExpandableItem
+              itemKey={key}
+              isExpanded={isExpanded}
+              onClick={() => toggleExpanded(key)}
+              mainContent={title}
+              expandedContent={<div className={styles.expandedContentWrapper}>{content}</div>}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default BatchDetails;
diff --git a/packages/webapp/src/stories/Animals/Details/BatchDetails.stories.tsx b/packages/webapp/src/stories/Animals/Details/BatchDetails.stories.tsx
new file mode 100644
index 0000000000..d106656a82
--- /dev/null
+++ b/packages/webapp/src/stories/Animals/Details/BatchDetails.stories.tsx
@@ -0,0 +1,70 @@
+/*
+ *  Copyright 2024 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 { Suspense } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { Meta, StoryObj } from '@storybook/react';
+import AnimalCreationDetails, {
+  BatchDetailsProps,
+} from '../../../components/Animals/AddBatchDetails';
+import BatchDetails from '../../../components/Animals/AddBatchDetails';
+import { FormMethods } from '../../../components/Animals/AddAnimalsDetails/type';
+import {
+  typeOptions,
+  breedOptions,
+  sexOptions,
+  useOptions,
+  organicStatusOptions,
+  originOptions,
+} from './mockData';
+
+// https://storybook.js.org/docs/writing-stories/typescript
+const meta: Meta<BatchDetailsProps> = {
+  title: 'Components/AddBatchDetails',
+  component: BatchDetails,
+};
+export default meta;
+
+type Story = StoryObj<typeof AnimalCreationDetails>;
+
+export const Default: Story = {
+  render: () => {
+    const formMethods: FormMethods = useForm();
+
+    return (
+      <Suspense>
+        <div style={{ padding: '16px' }}>
+          <FormProvider {...formMethods}>
+            <BatchDetails
+              generalDetailProps={{
+                typeOptions,
+                breedOptions,
+                sexOptions,
+                useOptions,
+              }}
+              otherDetailsProps={{
+                organicStatusOptions,
+              }}
+              originProps={{
+                currency: '$',
+                originOptions,
+              }}
+            />
+          </FormProvider>
+        </div>
+      </Suspense>
+    );
+  },
+};

From d1f5ff8b4f93a52784a2d7383c9699fd47d60ea0 Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Fri, 9 Aug 2024 17:02:15 -0700
Subject: [PATCH 02/10] LF-4159 Pass iconClickOnly={false} to ExpandableItem

---
 .../webapp/src/components/Animals/AddAnimalsDetails/index.tsx    | 1 +
 packages/webapp/src/components/Animals/AddBatchDetails/index.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/webapp/src/components/Animals/AddAnimalsDetails/index.tsx b/packages/webapp/src/components/Animals/AddAnimalsDetails/index.tsx
index dfe5b2d6e3..d7ac7f0834 100644
--- a/packages/webapp/src/components/Animals/AddAnimalsDetails/index.tsx
+++ b/packages/webapp/src/components/Animals/AddAnimalsDetails/index.tsx
@@ -93,6 +93,7 @@ const AnimalDetails = ({
             <ExpandableItem
               itemKey={key}
               isExpanded={isExpanded}
+              iconClickOnly={false}
               onClick={() => toggleExpanded(key)}
               mainContent={title}
               expandedContent={<div className={styles.expandedContentWrapper}>{content}</div>}
diff --git a/packages/webapp/src/components/Animals/AddBatchDetails/index.tsx b/packages/webapp/src/components/Animals/AddBatchDetails/index.tsx
index c6ed0ce3b2..ed7315ab72 100644
--- a/packages/webapp/src/components/Animals/AddBatchDetails/index.tsx
+++ b/packages/webapp/src/components/Animals/AddBatchDetails/index.tsx
@@ -84,6 +84,7 @@ const BatchDetails = ({
             <ExpandableItem
               itemKey={key}
               isExpanded={isExpanded}
+              iconClickOnly={false}
               onClick={() => toggleExpanded(key)}
               mainContent={title}
               expandedContent={<div className={styles.expandedContentWrapper}>{content}</div>}

From 321d6d304ec9b7400e5fc24d5f66a16915cced31 Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Fri, 9 Aug 2024 17:35:04 -0700
Subject: [PATCH 03/10] LF-4159 Add count and SexDetails to General card and
 stories

---
 .../Animals/AddAnimalsDetails/General.tsx     | 35 +++++++++++++++++--
 .../AddAnimalsDetails/styles.module.scss      | 13 +++++++
 .../Animals/AddAnimalsDetails/type.ts         |  2 ++
 .../Animals/Details/AnimalDetails.stories.tsx |  2 ++
 .../Animals/Details/BatchDetails.stories.tsx  |  2 ++
 .../Animals/Details/General.stories.tsx       |  3 +-
 .../src/stories/Animals/Details/mockData.js   |  5 +++
 7 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/packages/webapp/src/components/Animals/AddAnimalsDetails/General.tsx b/packages/webapp/src/components/Animals/AddAnimalsDetails/General.tsx
index 974dac7d9a..88799e192e 100644
--- a/packages/webapp/src/components/Animals/AddAnimalsDetails/General.tsx
+++ b/packages/webapp/src/components/Animals/AddAnimalsDetails/General.tsx
@@ -19,6 +19,9 @@ import Input, { getInputErrors } from '../../Form/Input';
 import RadioGroup from '../../Form/RadioGroup';
 import ReactSelect from '../../Form/ReactSelect';
 import InputBaseLabel from '../../Form/InputBase/InputBaseLabel';
+import NumberInput from '../../Form/NumberInput';
+import SexDetails from '../../Form/SexDetails';
+import { type Details as SexDetailsType } from '../../Form/SexDetails/SexDetailsPopover';
 import { AnimalOrBatchKeys } from '../../../containers/Animals/types';
 import { DetailsFields, type Option, type CommonDetailsProps } from './type';
 import styles from './styles.module.scss';
@@ -30,6 +33,7 @@ export type GeneralDetailsProps = CommonDetailsProps & {
   useOptions: Option[DetailsFields.USE][];
   animalOrBatch: AnimalOrBatchKeys;
   isMaleSelected?: boolean;
+  sexDetailsOptions: SexDetailsType;
 };
 
 const GeneralDetails = ({
@@ -40,14 +44,18 @@ const GeneralDetails = ({
   useOptions,
   animalOrBatch,
   isMaleSelected,
+  sexDetailsOptions,
 }: GeneralDetailsProps) => {
   const {
     control,
     register,
     trigger,
+    watch,
     formState: { errors },
   } = useFormContext();
 
+  const watchBatchCount = watch(DetailsFields.COUNT) || 0;
+
   const sexInputs = useMemo(() => {
     if (animalOrBatch === AnimalOrBatchKeys.ANIMAL) {
       return (
@@ -77,8 +85,31 @@ const GeneralDetails = ({
       );
     }
 
-    return 'TODO: LF-4159';
-  }, [animalOrBatch, t, isMaleSelected, sexOptions, control]);
+    return (
+      <div className={styles.countAndSexDetailsWrapper}>
+        <NumberInput
+          name={DetailsFields.COUNT}
+          control={control}
+          defaultValue={0}
+          label={t('common:COUNT')}
+          className={styles.countInput}
+          allowDecimal={false}
+          showStepper
+        />
+        <Controller
+          name={DetailsFields.SEX_DETAILS}
+          control={control}
+          render={({ field }) => (
+            <SexDetails
+              initialDetails={sexDetailsOptions}
+              maxCount={watchBatchCount}
+              onConfirm={(details) => field.onChange(details)}
+            />
+          )}
+        />
+      </div>
+    );
+  }, [animalOrBatch, t, isMaleSelected, sexOptions, control, watchBatchCount]);
 
   return (
     <div className={styles.sectionWrapper}>
diff --git a/packages/webapp/src/components/Animals/AddAnimalsDetails/styles.module.scss b/packages/webapp/src/components/Animals/AddAnimalsDetails/styles.module.scss
index 51983aa1ae..b7e3db1805 100644
--- a/packages/webapp/src/components/Animals/AddAnimalsDetails/styles.module.scss
+++ b/packages/webapp/src/components/Animals/AddAnimalsDetails/styles.module.scss
@@ -35,3 +35,16 @@
   flex-direction: column;
   gap: 16px;
 }
+
+.countAndSexDetailsWrapper {
+  display: flex;
+  align-items: start;
+  gap: 16px;
+}
+
+.countInput {
+  flex-basis: 104px;
+  & + div {
+    flex: 1;
+  }
+}
diff --git a/packages/webapp/src/components/Animals/AddAnimalsDetails/type.ts b/packages/webapp/src/components/Animals/AddAnimalsDetails/type.ts
index 09a9e0b3d6..d226c1c03b 100644
--- a/packages/webapp/src/components/Animals/AddAnimalsDetails/type.ts
+++ b/packages/webapp/src/components/Animals/AddAnimalsDetails/type.ts
@@ -29,6 +29,8 @@ export enum DetailsFields {
   SEX = 'sex',
   USED_FOR_REPRODUCTION = 'USED_FOR_REPRODUCTION',
   USE = 'use',
+  COUNT = 'count',
+  SEX_DETAILS = 'sexDetails',
 
   // UNIQUE
   DATE_OF_BIRTH = 'birth_date',
diff --git a/packages/webapp/src/stories/Animals/Details/AnimalDetails.stories.tsx b/packages/webapp/src/stories/Animals/Details/AnimalDetails.stories.tsx
index 170d6e7d2c..eb055f8899 100644
--- a/packages/webapp/src/stories/Animals/Details/AnimalDetails.stories.tsx
+++ b/packages/webapp/src/stories/Animals/Details/AnimalDetails.stories.tsx
@@ -25,6 +25,7 @@ import {
   typeOptions,
   breedOptions,
   sexOptions,
+  sexDetailsOptions,
   useOptions,
   tagTypeOptions,
   tagColorOptions,
@@ -56,6 +57,7 @@ export const Default: Story = {
                 breedOptions,
                 sexOptions,
                 useOptions,
+                sexDetailsOptions,
               }}
               uniqueDetailsProps={{
                 tagTypeOptions,
diff --git a/packages/webapp/src/stories/Animals/Details/BatchDetails.stories.tsx b/packages/webapp/src/stories/Animals/Details/BatchDetails.stories.tsx
index d106656a82..08f8ec981e 100644
--- a/packages/webapp/src/stories/Animals/Details/BatchDetails.stories.tsx
+++ b/packages/webapp/src/stories/Animals/Details/BatchDetails.stories.tsx
@@ -25,6 +25,7 @@ import {
   typeOptions,
   breedOptions,
   sexOptions,
+  sexDetailsOptions,
   useOptions,
   organicStatusOptions,
   originOptions,
@@ -53,6 +54,7 @@ export const Default: Story = {
                 breedOptions,
                 sexOptions,
                 useOptions,
+                sexDetailsOptions,
               }}
               otherDetailsProps={{
                 organicStatusOptions,
diff --git a/packages/webapp/src/stories/Animals/Details/General.stories.tsx b/packages/webapp/src/stories/Animals/Details/General.stories.tsx
index f6c465f683..5b83312609 100644
--- a/packages/webapp/src/stories/Animals/Details/General.stories.tsx
+++ b/packages/webapp/src/stories/Animals/Details/General.stories.tsx
@@ -22,7 +22,7 @@ import GeneralDetails, {
 } from '../../../components/Animals/AddAnimalsDetails/General';
 import { AnimalOrBatchKeys } from '../../../containers/Animals/types';
 import { DetailsFields, FormMethods } from '../../../components/Animals/AddAnimalsDetails/type';
-import { typeOptions, breedOptions, sexOptions, useOptions } from './mockData';
+import { typeOptions, breedOptions, sexOptions, sexDetailsOptions, useOptions } from './mockData';
 
 // https://storybook.js.org/docs/writing-stories/typescript
 const meta: Meta<GeneralDetailsProps> = {
@@ -64,6 +64,7 @@ export const Batch: Story = {
   args: {
     ...commonProps,
     animalOrBatch: AnimalOrBatchKeys.BATCH,
+    sexDetailsOptions,
   },
   render: (args, context) => <GeneralDetails {...args} {...context} />,
 };
diff --git a/packages/webapp/src/stories/Animals/Details/mockData.js b/packages/webapp/src/stories/Animals/Details/mockData.js
index 76b1e19622..8b679da56e 100644
--- a/packages/webapp/src/stories/Animals/Details/mockData.js
+++ b/packages/webapp/src/stories/Animals/Details/mockData.js
@@ -31,6 +31,11 @@ export const sexOptions = [
   { value: 2, label: 'Female' },
 ];
 
+export const sexDetailsOptions = [
+  { id: 0, label: 'Male', count: 0 },
+  { id: 1, label: 'Female', count: 0 },
+];
+
 export const useOptions = [
   { label: 'A', value: 'A' },
   { label: 'B', value: 'B' },

From 40be8117a642c9ccb77de7fabfdc40f133db41a2 Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Mon, 12 Aug 2024 11:18:06 -0700
Subject: [PATCH 04/10] LF-4159 Disable type and breed and remove option arrays
 from passed data

---
 .../src/components/Animals/AddAnimalsDetails/General.tsx  | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/webapp/src/components/Animals/AddAnimalsDetails/General.tsx b/packages/webapp/src/components/Animals/AddAnimalsDetails/General.tsx
index 88799e192e..1bd984a021 100644
--- a/packages/webapp/src/components/Animals/AddAnimalsDetails/General.tsx
+++ b/packages/webapp/src/components/Animals/AddAnimalsDetails/General.tsx
@@ -27,8 +27,6 @@ import { DetailsFields, type Option, type CommonDetailsProps } from './type';
 import styles from './styles.module.scss';
 
 export type GeneralDetailsProps = CommonDetailsProps & {
-  typeOptions: Option[DetailsFields.TYPE][];
-  breedOptions: Option[DetailsFields.BREED][];
   sexOptions: Option[DetailsFields.SEX][];
   useOptions: Option[DetailsFields.USE][];
   animalOrBatch: AnimalOrBatchKeys;
@@ -38,8 +36,6 @@ export type GeneralDetailsProps = CommonDetailsProps & {
 
 const GeneralDetails = ({
   t,
-  typeOptions,
-  breedOptions,
   sexOptions,
   useOptions,
   animalOrBatch,
@@ -137,7 +133,7 @@ const GeneralDetails = ({
             label={t('ANIMAL.ANIMAL_TYPE')}
             value={value}
             onChange={onChange}
-            options={typeOptions}
+            isDisabled
           />
         )}
       />
@@ -150,7 +146,7 @@ const GeneralDetails = ({
             optional
             value={value}
             onChange={onChange}
-            options={breedOptions}
+            isDisabled
           />
         )}
       />

From afd3e7be65d8a979cbbf6c866b3ed9f6d5cd3bd2 Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Mon, 12 Aug 2024 11:21:22 -0700
Subject: [PATCH 05/10] LF-4159 Update stories to handle disabled type and
 breed

Remove options from mockData and provide default values. Types were adjusted to allow defaultValues on only two form fields.
---
 .../Animals/AddAnimalsDetails/type.ts           |  9 +++++----
 .../Animals/Details/AnimalDetails.stories.tsx   |  9 ++++-----
 .../Animals/Details/BatchDetails.stories.tsx    |  9 ++++-----
 .../stories/Animals/Details/General.stories.tsx | 15 +++++++++++----
 .../Details/{mockData.js => mockData.ts}        | 17 ++++++-----------
 5 files changed, 30 insertions(+), 29 deletions(-)
 rename packages/webapp/src/stories/Animals/Details/{mockData.js => mockData.ts} (85%)

diff --git a/packages/webapp/src/components/Animals/AddAnimalsDetails/type.ts b/packages/webapp/src/components/Animals/AddAnimalsDetails/type.ts
index d226c1c03b..077f4e68c0 100644
--- a/packages/webapp/src/components/Animals/AddAnimalsDetails/type.ts
+++ b/packages/webapp/src/components/Animals/AddAnimalsDetails/type.ts
@@ -15,6 +15,7 @@
 
 import { UseFormReturn } from 'react-hook-form';
 import { TFunction } from 'react-i18next';
+import { Option as AnimalSelectOption } from '../AddAnimalsFormCard/AnimalSelect';
 
 export type ReactSelectOption<T extends string | number> = {
   label: string;
@@ -57,9 +58,9 @@ export enum DetailsFields {
 }
 
 export type Option = {
-  [DetailsFields.TYPE]: ReactSelectOption<string>; // TODO: LF-4159
-  [DetailsFields.BREED]: ReactSelectOption<string>; // TODO: LF-4159
-  [DetailsFields.USE]: ReactSelectOption<number | string>; // TODO: LF-4159
+  [DetailsFields.TYPE]: ReactSelectOption<number | string>;
+  [DetailsFields.BREED]: ReactSelectOption<number | string>;
+  [DetailsFields.USE]: ReactSelectOption<number | string>;
   [DetailsFields.TAG_COLOR]: ReactSelectOption<number>;
   [DetailsFields.TAG_TYPE]: ReactSelectOption<number>;
   [DetailsFields.TAG_PLACEMENT]: ReactSelectOption<number>;
@@ -94,7 +95,7 @@ export type FormValues = {
   [DetailsFields.PRICE]?: number;
 };
 
-export interface FormMethods extends UseFormReturn<FormValues> {}
+export interface FormMethods extends UseFormReturn<Partial<FormValues>> {}
 
 export type CommonDetailsProps = {
   t: TFunction;
diff --git a/packages/webapp/src/stories/Animals/Details/AnimalDetails.stories.tsx b/packages/webapp/src/stories/Animals/Details/AnimalDetails.stories.tsx
index eb055f8899..d51f294ac6 100644
--- a/packages/webapp/src/stories/Animals/Details/AnimalDetails.stories.tsx
+++ b/packages/webapp/src/stories/Animals/Details/AnimalDetails.stories.tsx
@@ -22,8 +22,6 @@ import AnimalCreationDetails, {
 import AnimalDetails from '../../../components/Animals/AddAnimalsDetails';
 import { FormMethods } from '../../../components/Animals/AddAnimalsDetails/type';
 import {
-  typeOptions,
-  breedOptions,
   sexOptions,
   sexDetailsOptions,
   useOptions,
@@ -32,6 +30,7 @@ import {
   tagPlacementOptions,
   organicStatusOptions,
   originOptions,
+  defaultValues,
 } from './mockData';
 
 // https://storybook.js.org/docs/writing-stories/typescript
@@ -45,7 +44,9 @@ type Story = StoryObj<typeof AnimalCreationDetails>;
 
 export const Default: Story = {
   render: () => {
-    const formMethods: FormMethods = useForm();
+    const formMethods: FormMethods = useForm({
+      defaultValues,
+    });
 
     return (
       <Suspense>
@@ -53,8 +54,6 @@ export const Default: Story = {
           <FormProvider {...formMethods}>
             <AnimalDetails
               generalDetailProps={{
-                typeOptions,
-                breedOptions,
                 sexOptions,
                 useOptions,
                 sexDetailsOptions,
diff --git a/packages/webapp/src/stories/Animals/Details/BatchDetails.stories.tsx b/packages/webapp/src/stories/Animals/Details/BatchDetails.stories.tsx
index 08f8ec981e..61ae368b67 100644
--- a/packages/webapp/src/stories/Animals/Details/BatchDetails.stories.tsx
+++ b/packages/webapp/src/stories/Animals/Details/BatchDetails.stories.tsx
@@ -22,13 +22,12 @@ import AnimalCreationDetails, {
 import BatchDetails from '../../../components/Animals/AddBatchDetails';
 import { FormMethods } from '../../../components/Animals/AddAnimalsDetails/type';
 import {
-  typeOptions,
-  breedOptions,
   sexOptions,
   sexDetailsOptions,
   useOptions,
   organicStatusOptions,
   originOptions,
+  defaultValues,
 } from './mockData';
 
 // https://storybook.js.org/docs/writing-stories/typescript
@@ -42,7 +41,9 @@ type Story = StoryObj<typeof AnimalCreationDetails>;
 
 export const Default: Story = {
   render: () => {
-    const formMethods: FormMethods = useForm();
+    const formMethods: FormMethods = useForm({
+      defaultValues,
+    });
 
     return (
       <Suspense>
@@ -50,8 +51,6 @@ export const Default: Story = {
           <FormProvider {...formMethods}>
             <BatchDetails
               generalDetailProps={{
-                typeOptions,
-                breedOptions,
                 sexOptions,
                 useOptions,
                 sexDetailsOptions,
diff --git a/packages/webapp/src/stories/Animals/Details/General.stories.tsx b/packages/webapp/src/stories/Animals/Details/General.stories.tsx
index 5b83312609..8de03bb97e 100644
--- a/packages/webapp/src/stories/Animals/Details/General.stories.tsx
+++ b/packages/webapp/src/stories/Animals/Details/General.stories.tsx
@@ -21,8 +21,12 @@ import GeneralDetails, {
   GeneralDetailsProps,
 } from '../../../components/Animals/AddAnimalsDetails/General';
 import { AnimalOrBatchKeys } from '../../../containers/Animals/types';
-import { DetailsFields, FormMethods } from '../../../components/Animals/AddAnimalsDetails/type';
-import { typeOptions, breedOptions, sexOptions, sexDetailsOptions, useOptions } from './mockData';
+import {
+  DetailsFields,
+  FormMethods,
+  FormValues,
+} from '../../../components/Animals/AddAnimalsDetails/type';
+import { sexOptions, sexDetailsOptions, useOptions, defaultValues } from './mockData';
 
 // https://storybook.js.org/docs/writing-stories/typescript
 const meta: Meta<GeneralDetailsProps> = {
@@ -32,7 +36,10 @@ const meta: Meta<GeneralDetailsProps> = {
     ...componentDecorators,
     (Story) => {
       const { t } = useTranslation();
-      const formMethods: FormMethods = useForm({ mode: 'onBlur' });
+      const formMethods: FormMethods = useForm({
+        mode: 'onBlur',
+        defaultValues,
+      });
       const sex = formMethods.watch(DetailsFields.SEX);
       const isMaleSelected = sex === 1;
 
@@ -50,7 +57,7 @@ export default meta;
 
 type Story = StoryObj<typeof GeneralDetails>;
 
-const commonProps = { typeOptions, breedOptions, sexOptions, useOptions };
+const commonProps = { sexOptions, useOptions };
 
 export const Animal: Story = {
   args: {
diff --git a/packages/webapp/src/stories/Animals/Details/mockData.js b/packages/webapp/src/stories/Animals/Details/mockData.ts
similarity index 85%
rename from packages/webapp/src/stories/Animals/Details/mockData.js
rename to packages/webapp/src/stories/Animals/Details/mockData.ts
index 8b679da56e..cb5cc272e0 100644
--- a/packages/webapp/src/stories/Animals/Details/mockData.js
+++ b/packages/webapp/src/stories/Animals/Details/mockData.ts
@@ -13,17 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-export const typeOptions = [
-  { value: 'default_1', label: 'Cattle' },
-  { value: 'default_2', label: 'Pig' },
-  { value: 'default_3', label: 'Chicken' },
-  { value: 'custom_1', label: 'Sheep' },
-];
-
-export const breedOptions = [
-  { value: '1', label: 'Angus' },
-  { value: '2', label: 'Cobb 5' },
-];
+import { DetailsFields, FormValues } from '../../../components/Animals/AddAnimalsDetails/type';
 
 export const sexOptions = [
   { value: 0, label: `I don't know` },
@@ -75,3 +65,8 @@ export const originOptions = [
   { value: 1, label: 'Brought in' },
   { value: 2, label: 'Born at the farm' },
 ];
+
+export const defaultValues: Partial<FormValues> = {
+  [DetailsFields.TYPE]: { value: 'default_1', label: 'Cattle' },
+  [DetailsFields.BREED]: { value: 'default_2', label: 'Angus' },
+};

From e5bb012e920b0154b46a84424c97a17b8ce90065 Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Mon, 12 Aug 2024 11:35:03 -0700
Subject: [PATCH 06/10] LF-4259 Make sexDetails optional to remove from stories

I did assert on the component type but the discriminant type on the General props was turning out to be too much type code and wasn't working well with this two outer component, one inner component setup
---
 .../src/components/Animals/AddAnimalsDetails/General.tsx      | 4 ++--
 .../src/stories/Animals/Details/AnimalDetails.stories.tsx     | 2 --
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/webapp/src/components/Animals/AddAnimalsDetails/General.tsx b/packages/webapp/src/components/Animals/AddAnimalsDetails/General.tsx
index 1bd984a021..625fb3220d 100644
--- a/packages/webapp/src/components/Animals/AddAnimalsDetails/General.tsx
+++ b/packages/webapp/src/components/Animals/AddAnimalsDetails/General.tsx
@@ -31,7 +31,7 @@ export type GeneralDetailsProps = CommonDetailsProps & {
   useOptions: Option[DetailsFields.USE][];
   animalOrBatch: AnimalOrBatchKeys;
   isMaleSelected?: boolean;
-  sexDetailsOptions: SexDetailsType;
+  sexDetailsOptions?: SexDetailsType;
 };
 
 const GeneralDetails = ({
@@ -97,7 +97,7 @@ const GeneralDetails = ({
           control={control}
           render={({ field }) => (
             <SexDetails
-              initialDetails={sexDetailsOptions}
+              initialDetails={sexDetailsOptions!}
               maxCount={watchBatchCount}
               onConfirm={(details) => field.onChange(details)}
             />
diff --git a/packages/webapp/src/stories/Animals/Details/AnimalDetails.stories.tsx b/packages/webapp/src/stories/Animals/Details/AnimalDetails.stories.tsx
index d51f294ac6..507bb9d201 100644
--- a/packages/webapp/src/stories/Animals/Details/AnimalDetails.stories.tsx
+++ b/packages/webapp/src/stories/Animals/Details/AnimalDetails.stories.tsx
@@ -23,7 +23,6 @@ import AnimalDetails from '../../../components/Animals/AddAnimalsDetails';
 import { FormMethods } from '../../../components/Animals/AddAnimalsDetails/type';
 import {
   sexOptions,
-  sexDetailsOptions,
   useOptions,
   tagTypeOptions,
   tagColorOptions,
@@ -56,7 +55,6 @@ export const Default: Story = {
               generalDetailProps={{
                 sexOptions,
                 useOptions,
-                sexDetailsOptions,
               }}
               uniqueDetailsProps={{
                 tagTypeOptions,

From 5be7711479be95b53dc81871f064682c78251973 Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Mon, 12 Aug 2024 11:46:19 -0700
Subject: [PATCH 07/10] LF-4159 Use the type exported by the basics form for
 value of type and breed

---
 .../webapp/src/components/Animals/AddAnimalsDetails/type.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/webapp/src/components/Animals/AddAnimalsDetails/type.ts b/packages/webapp/src/components/Animals/AddAnimalsDetails/type.ts
index 077f4e68c0..0c6f18acbf 100644
--- a/packages/webapp/src/components/Animals/AddAnimalsDetails/type.ts
+++ b/packages/webapp/src/components/Animals/AddAnimalsDetails/type.ts
@@ -58,8 +58,8 @@ export enum DetailsFields {
 }
 
 export type Option = {
-  [DetailsFields.TYPE]: ReactSelectOption<number | string>;
-  [DetailsFields.BREED]: ReactSelectOption<number | string>;
+  [DetailsFields.TYPE]: AnimalSelectOption;
+  [DetailsFields.BREED]: AnimalSelectOption;
   [DetailsFields.USE]: ReactSelectOption<number | string>;
   [DetailsFields.TAG_COLOR]: ReactSelectOption<number>;
   [DetailsFields.TAG_TYPE]: ReactSelectOption<number>;

From 720bdfd3f5d3a16c7b9f55c44504d4068f9f1bd8 Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Fri, 16 Aug 2024 10:39:28 -0700
Subject: [PATCH 08/10] LF-4159 Update type of USE select option (use is a
 non-creatable select)

---
 .../webapp/src/components/Animals/AddAnimalsDetails/type.ts | 2 +-
 .../webapp/src/stories/Animals/Details/General.stories.tsx  | 4 ++--
 packages/webapp/src/stories/Animals/Details/mockData.ts     | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/webapp/src/components/Animals/AddAnimalsDetails/type.ts b/packages/webapp/src/components/Animals/AddAnimalsDetails/type.ts
index 86d51ab6a9..847089dc49 100644
--- a/packages/webapp/src/components/Animals/AddAnimalsDetails/type.ts
+++ b/packages/webapp/src/components/Animals/AddAnimalsDetails/type.ts
@@ -60,7 +60,7 @@ export enum DetailsFields {
 export type Option = {
   [DetailsFields.TYPE]: AnimalSelectOption;
   [DetailsFields.BREED]: AnimalSelectOption;
-  [DetailsFields.USE]: ReactSelectOption<number | string>;
+  [DetailsFields.USE]: ReactSelectOption<number>;
   [DetailsFields.TAG_COLOR]: ReactSelectOption<number>;
   [DetailsFields.TAG_TYPE]: ReactSelectOption<number>;
   [DetailsFields.TAG_PLACEMENT]: ReactSelectOption<number>;
diff --git a/packages/webapp/src/stories/Animals/Details/General.stories.tsx b/packages/webapp/src/stories/Animals/Details/General.stories.tsx
index 28177f6fe5..27372b44be 100644
--- a/packages/webapp/src/stories/Animals/Details/General.stories.tsx
+++ b/packages/webapp/src/stories/Animals/Details/General.stories.tsx
@@ -40,9 +40,9 @@ const meta: Meta<GeneralDetailsProps> = {
         mode: 'onBlur',
         defaultValues,
       });
-      const sex = formMethods.watch(DetailsFields.SEX);
       const use = formMethods.watch(DetailsFields.USE);
-      const isOtherUseSelected = use?.some((selected) => selected.value === 'OTHER');
+      const otherUseId = 2; // mockData. Container should derive from KEY
+      const isOtherUseSelected = use?.some((selected) => selected.value === otherUseId);
 
       return (
         <FormProvider {...formMethods}>
diff --git a/packages/webapp/src/stories/Animals/Details/mockData.ts b/packages/webapp/src/stories/Animals/Details/mockData.ts
index 876e49ae66..08d6e77e05 100644
--- a/packages/webapp/src/stories/Animals/Details/mockData.ts
+++ b/packages/webapp/src/stories/Animals/Details/mockData.ts
@@ -27,9 +27,9 @@ export const sexDetailsOptions = [
 ];
 
 export const useOptions = [
-  { label: 'A', value: 'A' },
-  { label: 'B', value: 'B' },
-  { label: 'Other', value: 'OTHER' },
+  { label: 'A', value: 0 },
+  { label: 'B', value: 1 },
+  { label: 'Other', value: 2 },
 ];
 
 export const tagTypeOptions = [

From 84660b83edaf91f0c4649f10ada802a428a1d8c6 Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Fri, 16 Aug 2024 10:51:12 -0700
Subject: [PATCH 09/10] LF-4159 Add distinct titles for batch subcomponents as
 per Figma

---
 packages/webapp/public/locales/en/translation.json          | 3 +++
 packages/webapp/public/locales/es/translation.json          | 3 +++
 packages/webapp/public/locales/fr/translation.json          | 3 +++
 packages/webapp/public/locales/pt/translation.json          | 3 +++
 .../webapp/src/components/Animals/AddBatchDetails/index.tsx | 6 +++---
 5 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/webapp/public/locales/en/translation.json b/packages/webapp/public/locales/en/translation.json
index 1c22e32bee..97a6fccae4 100644
--- a/packages/webapp/public/locales/en/translation.json
+++ b/packages/webapp/public/locales/en/translation.json
@@ -16,10 +16,13 @@
     "CREATE_INDIVIDUAL_PROFILES": "Create individual animal profiles",
     "CREATE_INDIVIDUAL_PROFILES_TOOLTIP": "Select this option if you want to track and manage each animal separately. This allows for detailed records and individualised care plans, all animals will be conveniently grouped. If you don't select 'Create Individual Animal Profiles' you'll create an Animal Batch. This is ideal for\u00a0managing animals collectively. In batch mode, individual animal details are not tracked.",
     "GENERAL_DETAILS": "General details",
+    "GENERAL_DETAILS_BATCH": "Batch general details",
     "GROUP_NAME": "Group name",
     "GROUP_NAME_PLACEHOLDER": "Type in group name",
     "ORIGIN": "Origin",
+    "ORIGIN_BATCH": "Batch origin",
     "OTHER_DETAILS": "Other details",
+    "OTHER_DETAILS_BATCH": "Batch other details",
     "OUT_OF_COUNT_one": "{{animalNumber}} out of {{count}}",
     "OUT_OF_COUNT_other": "{{animalNumber}} out of {{count}}",
     "PLACEHOLDER": {
diff --git a/packages/webapp/public/locales/es/translation.json b/packages/webapp/public/locales/es/translation.json
index 59fee36fd1..43cac2fdfe 100644
--- a/packages/webapp/public/locales/es/translation.json
+++ b/packages/webapp/public/locales/es/translation.json
@@ -18,10 +18,13 @@
     "CREATE_INDIVIDUAL_PROFILES": "MISSING",
     "CREATE_INDIVIDUAL_PROFILES_TOOLTIP": "MISSING",
     "GENERAL_DETAILS": "MISSING",
+    "GENERAL_DETAILS_BATCH": "MISSING",
     "GROUP_NAME": "MISSING",
     "GROUP_NAME_PLACEHOLDER": "MISSING",
     "ORIGIN": "MISSING",
+    "ORIGIN_BATCH": "MISSING",
     "OTHER_DETAILS": "MISSING",
+    "OTHER_DETAILS_BATCH": "MISSING",
     "OUT_OF_COUNT_one": "MISSING",
     "OUT_OF_COUNT_many": "MISSING",
     "OUT_OF_COUNT_other": "MISSING",
diff --git a/packages/webapp/public/locales/fr/translation.json b/packages/webapp/public/locales/fr/translation.json
index a4eec43dae..454a0978d2 100644
--- a/packages/webapp/public/locales/fr/translation.json
+++ b/packages/webapp/public/locales/fr/translation.json
@@ -18,10 +18,13 @@
     "CREATE_INDIVIDUAL_PROFILES": "MISSING",
     "CREATE_INDIVIDUAL_PROFILES_TOOLTIP": "MISSING",
     "GENERAL_DETAILS": "MISSING",
+    "GENERAL_DETAILS_BATCH": "MISSING",
     "GROUP_NAME": "MISSING",
     "GROUP_NAME_PLACEHOLDER": "MISSING",
     "ORIGIN": "MISSING",
+    "ORIGIN_BATCH": "MISSING",
     "OTHER_DETAILS": "MISSING",
+    "OTHER_DETAILS_BATCH": "MISSING",
     "OUT_OF_COUNT_one": "MISSING",
     "OUT_OF_COUNT_many": "MISSING",
     "OUT_OF_COUNT_other": "MISSING",
diff --git a/packages/webapp/public/locales/pt/translation.json b/packages/webapp/public/locales/pt/translation.json
index 45f50c2a1e..224641cf2f 100644
--- a/packages/webapp/public/locales/pt/translation.json
+++ b/packages/webapp/public/locales/pt/translation.json
@@ -18,10 +18,13 @@
     "CREATE_INDIVIDUAL_PROFILES": "MISSING",
     "CREATE_INDIVIDUAL_PROFILES_TOOLTIP": "MISSING",
     "GENERAL_DETAILS": "MISSING",
+    "GENERAL_DETAILS_BATCH": "MISSING",
     "GROUP_NAME": "MISSING",
     "GROUP_NAME_PLACEHOLDER": "MISSING",
     "ORIGIN": "MISSING",
+    "ORIGIN_BATCH": "MISSING",
     "OTHER_DETAILS": "MISSING",
+    "OTHER_DETAILS_BATCH": "MISSING",
     "OUT_OF_COUNT_one": "MISSING",
     "OUT_OF_COUNT_many": "MISSING",
     "OUT_OF_COUNT_other": "MISSING",
diff --git a/packages/webapp/src/components/Animals/AddBatchDetails/index.tsx b/packages/webapp/src/components/Animals/AddBatchDetails/index.tsx
index ed7315ab72..72e7826662 100644
--- a/packages/webapp/src/components/Animals/AddBatchDetails/index.tsx
+++ b/packages/webapp/src/components/Animals/AddBatchDetails/index.tsx
@@ -47,7 +47,7 @@ const BatchDetails = ({
   const sections = [
     {
       key: sectionKeys.GENERAL,
-      title: t('ADD_ANIMAL.GENERAL_DETAILS'),
+      title: t('ADD_ANIMAL.GENERAL_DETAILS_BATCH'),
       content: (
         <GeneralDetails
           {...commonProps}
@@ -58,7 +58,7 @@ const BatchDetails = ({
     },
     {
       key: sectionKeys.OTHER,
-      title: t('ADD_ANIMAL.OTHER_DETAILS'),
+      title: t('ADD_ANIMAL.OTHER_DETAILS_BATCH'),
       content: (
         <OtherDetails
           {...commonProps}
@@ -69,7 +69,7 @@ const BatchDetails = ({
     },
     {
       key: sectionKeys.ORIGIN,
-      title: t('ADD_ANIMAL.ORIGIN'),
+      title: t('ADD_ANIMAL.ORIGIN_BATCH'),
       content: <Origin {...commonProps} {...originProps} />,
     },
   ];

From 559106f4cdf379c637b14ed4b8b8e3a81ffd4def Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Fri, 16 Aug 2024 11:56:54 -0700
Subject: [PATCH 10/10] LF-4159 Add origin interactivity to AddAnimalDetails
 and AddBatchDetails stories

---
 .../stories/Animals/Details/AnimalDetails.stories.tsx | 11 ++++++++++-
 .../stories/Animals/Details/BatchDetails.stories.tsx  | 11 ++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/webapp/src/stories/Animals/Details/AnimalDetails.stories.tsx b/packages/webapp/src/stories/Animals/Details/AnimalDetails.stories.tsx
index 507bb9d201..434dc697ac 100644
--- a/packages/webapp/src/stories/Animals/Details/AnimalDetails.stories.tsx
+++ b/packages/webapp/src/stories/Animals/Details/AnimalDetails.stories.tsx
@@ -20,7 +20,7 @@ import AnimalCreationDetails, {
   AnimalDetailsProps,
 } from '../../../components/Animals/AddAnimalsDetails';
 import AnimalDetails from '../../../components/Animals/AddAnimalsDetails';
-import { FormMethods } from '../../../components/Animals/AddAnimalsDetails/type';
+import { DetailsFields, FormMethods } from '../../../components/Animals/AddAnimalsDetails/type';
 import {
   sexOptions,
   useOptions,
@@ -31,6 +31,7 @@ import {
   originOptions,
   defaultValues,
 } from './mockData';
+import { AnimalOrigins } from '../../../containers/Animals/types';
 
 // https://storybook.js.org/docs/writing-stories/typescript
 const meta: Meta<AnimalDetailsProps> = {
@@ -47,6 +48,13 @@ export const Default: Story = {
       defaultValues,
     });
 
+    const originId = formMethods.watch(DetailsFields.ORIGIN);
+    const origin = !originId
+      ? undefined
+      : originId === 1
+        ? AnimalOrigins.BROUGHT_IN
+        : AnimalOrigins.BORN_AT_FARM;
+
     return (
       <Suspense>
         <div style={{ padding: '16px' }}>
@@ -67,6 +75,7 @@ export const Default: Story = {
               originProps={{
                 currency: '$',
                 originOptions,
+                origin,
               }}
             />
           </FormProvider>
diff --git a/packages/webapp/src/stories/Animals/Details/BatchDetails.stories.tsx b/packages/webapp/src/stories/Animals/Details/BatchDetails.stories.tsx
index 61ae368b67..b6a04eaad1 100644
--- a/packages/webapp/src/stories/Animals/Details/BatchDetails.stories.tsx
+++ b/packages/webapp/src/stories/Animals/Details/BatchDetails.stories.tsx
@@ -20,7 +20,7 @@ import AnimalCreationDetails, {
   BatchDetailsProps,
 } from '../../../components/Animals/AddBatchDetails';
 import BatchDetails from '../../../components/Animals/AddBatchDetails';
-import { FormMethods } from '../../../components/Animals/AddAnimalsDetails/type';
+import { DetailsFields, FormMethods } from '../../../components/Animals/AddAnimalsDetails/type';
 import {
   sexOptions,
   sexDetailsOptions,
@@ -29,6 +29,7 @@ import {
   originOptions,
   defaultValues,
 } from './mockData';
+import { AnimalOrigins } from '../../../containers/Animals/types';
 
 // https://storybook.js.org/docs/writing-stories/typescript
 const meta: Meta<BatchDetailsProps> = {
@@ -45,6 +46,13 @@ export const Default: Story = {
       defaultValues,
     });
 
+    const originId = formMethods.watch(DetailsFields.ORIGIN);
+    const origin = !originId
+      ? undefined
+      : originId === 1
+        ? AnimalOrigins.BROUGHT_IN
+        : AnimalOrigins.BORN_AT_FARM;
+
     return (
       <Suspense>
         <div style={{ padding: '16px' }}>
@@ -61,6 +69,7 @@ export const Default: Story = {
               originProps={{
                 currency: '$',
                 originOptions,
+                origin,
               }}
             />
           </FormProvider>