LF-4165: Create animal creation summary container

[SayakaOno]

Description

• Create functions to format DB animals/batches to summary format
  (to run tests: pnpm test src/tests/animalUtils.test.js)
• Update AddAnimalsSummaryCard (story) and IconSummary (story) to modify sex format (The design was updated: mockup)
• Implement AddAnimalSummary container

Jira link: https://lite-farm.atlassian.net/browse/LF-4165

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Until API calls are integrated,

1. comment out line 71-73 in packages/webapp/src/containers/Animals/AddAnimals/index.tsx
2. modify formResultData in packages/webapp/src/containers/Animals/AddAnimals/AddAnimalSummary/index.tsx:

formResultData.animals = <response of POST "/animals">
formResultData.batches = <response of POST "/animal_batches">

Sample responses

formResultData.animals = [
  {
    id: 8,
    default_type_id: 1,
    custom_type_id: null,
    default_breed_id: null,
    custom_breed_id: null,
    sex_id: 1,
    name: null,
  },
  {
    id: 3,
    default_type_id: 1,
    custom_type_id: null,
    default_breed_id: null,
    custom_breed_id: null,
    sex_id: 1,
    name: null,
  },
  {
    id: 7,
    default_type_id: 1,
    custom_type_id: null,
    default_breed_id: null,
    custom_breed_id: null,
    sex_id: 2,
    name: null,
  },
  {
    id: 2,
    default_type_id: 2,
    custom_type_id: null,
    default_breed_id: null,
    custom_breed_id: null,
    sex_id: null,
    name: null,
  },
  {
    id: 11,
    default_type_id: 1,
    custom_type_id: null,
    default_breed_id: null,
    custom_breed_id: null,
    sex_id: 1,
    name: null,
  },
  {
    id: 13,
    default_type_id: 1,
    custom_type_id: null,
    default_breed_id: null,
    custom_breed_id: null,
    sex_id: 1,
    name: null,
  },
  {
    id: 19,
    default_type_id: 1,
    custom_type_id: null,
    default_breed_id: 1,
    custom_breed_id: null,
    sex_id: 2,
    name: null,
  },
];
formResultData.batches = [
  {
    id: 5,
    farm_id: 'xxxxx',
    default_type_id: 1,
    custom_type_id: null,
    default_breed_id: null,
    custom_breed_id: null,
    name: null,
    notes: null,
    count: 100,
    photo_url: null,
    animal_removal_reason_id: null,
    removal_explanation: null,
    removal_date: null,
    sex_detail: [],
    internal_identifier: 5,
    group_ids: [2],
  },
  {
    id: 4,
    farm_id: 'xxxxx',
    default_type_id: 1,
    custom_type_id: null,
    default_breed_id: null,
    custom_breed_id: null,
    name: null,
    notes: null,
    count: 100,
    photo_url: null,
    animal_removal_reason_id: null,
    removal_explanation: null,
    removal_date: null,
    sex_detail: [],
    internal_identifier: 4,
    group_ids: [1],
  },
  {
    id: 3,
    farm_id: 'xxxxx',
    default_type_id: 2,
    custom_type_id: null,
    default_breed_id: null,
    custom_breed_id: null,
    name: null,
    notes: null,
    count: 100,
    photo_url: null,
    animal_removal_reason_id: null,
    removal_explanation: null,
    removal_date: null,
    sex_detail: [],
    internal_identifier: 2,
    group_ids: [2, 3],
  },
  {
    id: 2,
    farm_id: 'xxxxx',
    default_type_id: 1,
    custom_type_id: null,
    default_breed_id: null,
    custom_breed_id: null,
    name: null,
    notes: null,
    count: 50,
    photo_url: null,
    animal_removal_reason_id: null,
    removal_explanation: null,
    removal_date: null,
    sex_detail: [],
    internal_identifier: 3,
    group_ids: [1, 3],
  },
];

• Passes test case
• UI components visually reviewed on desktop view
• UI components visually reviewed on mobile view
• Other (please explain)

Checklist:

• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• The precommit and linting ran successfully
• I have added or updated language tags for text that's part of the UI
• I have added "MISSING" for all new language tags to languages I don't speak
• I have added the GNU General Public License to all new files

[Duncan-Brain]

Looks good!

Will the width be taken care of the other PR to be full width?

[SayakaOno]

Thank you Duncan! I thought the animal basics would be the only full width page! 😳
(but once this PR is merged to the integration, I think it will become full width, so I will need to add max-width: 1024px.)

Do you think all the pages in this flow should be full width??

[Duncan-Brain]

@SayakaOno I don't know about all pages, I am just seeing in figma that it looks full width. Maybe I am seeing the wrong part of figma

[kathyavini]

@Duncan-Brain and @SayakaOno that is the correct part of Figma! Those summary screens at the bottom are the most recent ones Loïc made.

[SayakaOno]

White background...! Thank you both, I think merging the integration fixed it!

[kathyavini]

Beautiful!! 😍 Did you make the tests while you were actually writing the util functions?

I miss TDD 🥹

[SayakaOno]

Thank you 😊 Yes, I wrote the tests while I was writing the functions.
We don't always have tasks that need tests, but they can be really handy sometimes! ❤️

[kathyavini]

Looks great!!! And functions perfectly merged with your other branch too 😉