LF-4475 [Nice to have] Update layout for manage custom tasks

packages/webapp/public/locales/en/translation.json

@@ -117,6 +117,7 @@
     "ASSIGN_TASK": "Assign task",
     "ASSIGNEE": "Assignee",
     "CANCEL": "task creation",
+    "CANT_FIND_INFO_TASK": "You can also create your own custom task types!",
     "CLEANING_VIEW": {
       "ESTIMATED_WATER": "Estimated water usage",
       "IS_PERMITTED": "Is the cleaning agent in the permitted substances list?",
@@ -200,7 +201,7 @@
       },
       "WHAT_TYPE_OF_IRRIGATION": "What type of irrigation?"
     },
-    "MANAGE_CUSTOM_TASKS": "Manage custom tasks",
+    "MANAGE_CUSTOM_TASKS": "Manage your custom tasks",
     "MOVEMENT_VIEW": {
       "MOVEMENT_PURPOSE_LABEL": "What's the purpose of this movement?",
       "MOVEMENT_PURPOSE_PLACEHOLDER": "Select the purpose for this movement",

packages/webapp/src/components/Finances/PureFinanceTypeSelection/CantFindCustomType/index.jsx → packages/webapp/src/components/Finances/PureFinanceTypeSelection/CantFindCustomType/index.tsx

@@ -13,8 +13,6 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
 import { useTranslation, Trans } from 'react-i18next';
 import styles from './styles.module.scss';
 import { IconLink, Semibold, Text } from '../../../Typography';
@@ -23,12 +21,28 @@ import { ReactComponent as Edit } from '../../../../assets/images/edit.svg';
 import { ReactComponent as UncheckedEnabled } from '../../../../assets/images/unchecked-enabled.svg';
 import { ReactComponent as CheckedEnabled } from '../../../../assets/images/checked-enabled.svg';
 
+// Handlers for when when 'miscelleneous' can be selected using this component (e.g. in Expense Types)
+interface MiscellaneousConfig {
+  addRemove: () => void;
+  selected: boolean;
+}
+
+export interface CantFindCustomTypeProps {
+  customTypeMessages: {
+    info: string;
+    manage: string;
+  };
+  miscellaneousConfig?: MiscellaneousConfig;
+  iconLinkId?: string; // used by spotlight
+  onGoToManageCustomType: () => void;
+}
+
 export const CantFindCustomType = ({
   customTypeMessages,
   miscellaneousConfig,
   iconLinkId,
   onGoToManageCustomType,
-}) => {
+}: CantFindCustomTypeProps) => {
   const { t } = useTranslation();
 
   const isChecked = miscellaneousConfig?.selected;
@@ -82,16 +96,3 @@ export const CantFindCustomType = ({
     </div>
   );
 };
-
-CantFindCustomType.propTypes = {
-  customTypeMessages: PropTypes.shape({
-    info: PropTypes.string,
-    manage: PropTypes.string,
-  }),
-  miscellaneousConfig: PropTypes.shape({
-    addRemove: PropTypes.func,
-    selected: PropTypes.bool,
-  }),
-  iconLinkId: PropTypes.string, // id used by spotlight
-  onGoToManageCustomType: PropTypes.func,
-};

packages/webapp/src/components/Finances/PureFinanceTypeSelection/CantFindCustomType/styles.module.scss

@@ -13,6 +13,8 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
+@import '@assets/mixin.scss';
+
 // 100vw background colour on small screens
 .background {
   position: relative;
@@ -22,7 +24,7 @@
   left: 50%;
   transform: translateX(-50%);
 
-  @media screen and (min-width: 640px) {
+  @include sm-breakpoint {
     width: 100%;
   }
 }
@@ -36,7 +38,7 @@
   align-items: flex-start;
   gap: 24px;
 
-  @media screen and (min-width: 640px) {
+  @include sm-breakpoint {
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
@@ -59,7 +61,7 @@
 .linkContainer {
   gap: 12px;
 
-  @media screen and (min-width: 640px) {
+  @include sm-breakpoint {
     width: fit-content;
     gap: 8px;
   }

packages/webapp/src/components/Task/PureTaskTypeSelection/PureTaskTypeSelection.jsx

@@ -25,12 +25,12 @@ import { ReactComponent as Movement } from '../../../assets/images/task/Movement
 import { ReactComponent as CustomTask } from '../../../assets/images/task/Custom.svg';
 import { useForm } from 'react-hook-form';
 import clsx from 'clsx';
-import Button from '../../Form/Button';
 import { PlantingTaskModal } from '../../Modals/PlantingTaskModal';
 import { isTaskType } from '../../../containers/Task/useIsTaskType';
 import { NoCropManagementPlanModal } from '../../Modals/NoCropManagementPlanModal';
 import { getSupportedTaskTypesSet } from '../getSupportedTaskTypesSet';
 import { ANIMAL_TASKS } from '../../../containers/Task/constants';
+import { CantFindCustomType } from '../../Finances/PureFinanceTypeSelection/CantFindCustomType';
 
 const icons = {
   SOIL_AMENDMENT_TASK: <SoilAmendment />,
@@ -189,9 +189,15 @@ export const PureTaskTypeSelection = ({
             })}
         </div>
         {isAdmin && (
-          <Button color={'secondary-2'} onClick={onCustomTask}>
-            {t('ADD_TASK.MANAGE_CUSTOM_TASKS')}
-          </Button>
+          <div className={styles.cantFindCustomTypeWrapper}>
+            <CantFindCustomType
+              customTypeMessages={{
+                info: t('ADD_TASK.CANT_FIND_INFO_TASK'),
+                manage: t('ADD_TASK.MANAGE_CUSTOM_TASKS'),
+              }}
+              onGoToManageCustomType={onCustomTask}
+            />
+          </div>
         )}
       </Form>
       {showPlantTaskModal && shouldShowPlantTaskSpotLight && (

packages/webapp/src/components/Task/PureTaskTypeSelection/styles.module.scss

@@ -68,3 +68,7 @@
   gap: 8px;
 }
 
+.cantFindCustomTypeWrapper {
+  padding-top: 24px;
+  padding-bottom: 72px;
+}

packages/webapp/src/stories/CantFindCustomType/CantFindCustomType.stories.tsx

@@ -0,0 +1,71 @@
+/*
+ *  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 { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { componentDecorators } from '../Pages/config/Decorators';
+import {
+  CantFindCustomType,
+  CantFindCustomTypeProps,
+} from '../../components/Finances/PureFinanceTypeSelection/CantFindCustomType';
+
+// https://storybook.js.org/docs/writing-stories/typescript
+const meta: Meta<CantFindCustomTypeProps> = {
+  title: 'Components/CantFindCustomType',
+  component: CantFindCustomType,
+  decorators: componentDecorators,
+  args: {
+    onGoToManageCustomType: () => console.log('Navigating to custom type management'),
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof CantFindCustomType>;
+
+export const Default: Story = {
+  args: {
+    customTypeMessages: {
+      info: 'You can also create your own custom tasks types!',
+      manage: 'Manage your custom tasks',
+    },
+  },
+};
+
+export const WithMiscellaneous: Story = {
+  render: () => {
+    useState;
+    const [selected, setSelected] = useState(false);
+
+    const addRemove = () => {
+      setSelected((prev) => !prev);
+    };
+
+    const miscellaneousConfig = {
+      addRemove,
+      selected,
+    };
+
+    return (
+      <CantFindCustomType
+        customTypeMessages={{
+          info: 'You can also create your own custom expense types!',
+          manage: 'Manage your custom expenses',
+        }}
+        miscellaneousConfig={miscellaneousConfig}
+        onGoToManageCustomType={() => console.log('Navigating to custom type management')}
+      />
+    );
+  },
+};