Merge pull request #3544 from LiteFarmOrg/LF-4375-spotlight-animals-a…

…dd-animals-beta-spotlight Lf 4375 spotlight animals add animals beta spotlight
LiteFarmOrg · Nov 26, 2024 · 34490d0 · 34490d0
2 parents 8dade36 + bdd242a
commit 34490d0
Show file tree

Hide file tree

Showing 28 changed files with 301 additions and 84 deletions.
diff --git a/packages/api/db/migration/20241121151043_add_animals_beta_spotlight.js b/packages/api/db/migration/20241121151043_add_animals_beta_spotlight.js
@@ -0,0 +1,28 @@
+/*
+ *  Copyright (c) 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/>.
+ */
+
+export const up = async function (knex) {
+  await knex.schema.alterTable('showedSpotlight', (t) => {
+    t.boolean('animals_beta').defaultTo(false);
+    t.timestamp('animals_beta_end').nullable().defaultTo(null);
+  });
+};
+
+export const down = async function (knex) {
+  await knex.schema.alterTable('showedSpotlight', (t) => {
+    t.dropColumn('animals_beta');
+    t.dropColumn('animals_beta_end');
+  });
+};
diff --git a/packages/api/src/controllers/showedSpotlightController.js b/packages/api/src/controllers/showedSpotlightController.js
@@ -43,6 +43,7 @@ const showedSpotlightController = {
             'repeat_management_plan_creation',
             'manage_custom_expense_type',
             'manage_custom_revenue_type',
+            'animals_beta',
           )
           .findById(user_id);
         res.status(200).send(data);

diff --git a/packages/api/src/models/showedSpotlightModel.js b/packages/api/src/models/showedSpotlightModel.js
@@ -74,6 +74,8 @@ class ShowedSpotlight extends Model {
         manage_custom_expense_type_end: { type: ['string', 'null'] },
         manage_custom_revenue_type: { type: 'boolean' },
         manage_custom_revenue_type_end: { type: ['string', 'null'] },
+        animals_beta: { type: 'boolean' },
+        animals_beta_end: { type: ['string', 'null'] },
       },
     };
   }

diff --git a/packages/webapp/public/locales/de/translation.json b/packages/webapp/public/locales/de/translation.json
@@ -1927,7 +1927,7 @@
   "BADGE": {
     "BETA": {
       "TITLE": "MISSING",
-      "CONTENT": "MISSING"
+      "ANIMALS_CONTENT": "MISSING"
     }
   }
 }
diff --git a/packages/webapp/public/locales/en/translation.json b/packages/webapp/public/locales/en/translation.json
@@ -307,6 +307,7 @@
       "WEANING_DATE": "Weaning date"
     },
     "BATCH": "Batch",
+    "BETA_SPOTLIGHT_HEADING": "Introducing the new Animals feature",
     "EDIT_ANIMAL_FLOW": "editing",
     "FILTER": {
       "BATCHES": "Batches",
@@ -1052,6 +1053,7 @@
     "ATTACHMENT_LABEL": "Upload screenshot or file",
     "EMAIL": "Email",
     "FEEDBACK_INVITATION": "Get help or give us feedback",
+    "SEND_US_FEEDBACK": "Send us feedback",
     "MESSAGE_LABEL": "Message",
     "OPTIONS": {
       "OTHER": "Other",
@@ -2075,7 +2077,7 @@
   "BADGE": {
     "BETA": {
       "TITLE": "Beta",
-      "CONTENT": "Get a sneak peek at our new animal management feature—now in beta! Your feedback is crucial as we refine this feature. Please share any bugs or suggestions you encounter. We appreciate your help in improving liteFarm! You can learn more about beta <a>here</a>"
+      "ANIMALS_CONTENT": "Get a sneak peek at our new animal management feature—now in beta! Your feedback is crucial as we refine this feature. Please share any bugs or suggestions you encounter. We appreciate your help in improving liteFarm! You can learn more about beta <a>here</a>"
     }
   }
 }
diff --git a/packages/webapp/public/locales/es/translation.json b/packages/webapp/public/locales/es/translation.json
@@ -2081,7 +2081,7 @@
   "BADGE": {
     "BETA": {
       "TITLE": "MISSING",
-      "CONTENT": "MISSING"
+      "ANIMALS_CONTENT": "MISSING"
     }
   }
 }
diff --git a/packages/webapp/public/locales/fr/translation.json b/packages/webapp/public/locales/fr/translation.json
@@ -2080,7 +2080,7 @@
   "BADGE": {
     "BETA": {
       "TITLE": "MISSING",
-      "CONTENT": "MISSING"
+      "ANIMALS_CONTENT": "MISSING"
     }
   }
 }
diff --git a/packages/webapp/public/locales/hi/translation.json b/packages/webapp/public/locales/hi/translation.json
@@ -1924,7 +1924,7 @@
   "BADGE": {
     "BETA": {
       "TITLE": "MISSING",
-      "CONTENT": "MISSING"
+      "ANIMALS_CONTENT": "MISSING"
     }
   }
 }
diff --git a/packages/webapp/public/locales/ml/translation.json b/packages/webapp/public/locales/ml/translation.json
@@ -1923,7 +1923,7 @@
   "BADGE": {
     "BETA": {
       "TITLE": "MISSING",
-      "CONTENT": "MISSING"
+      "ANIMALS_CONTENT": "MISSING"
     }
   }
 }
diff --git a/packages/webapp/public/locales/pa/translation.json b/packages/webapp/public/locales/pa/translation.json
@@ -1924,7 +1924,7 @@
   "BADGE": {
     "BETA": {
       "TITLE": "MISSING",
-      "CONTENT": "MISSING"
+      "ANIMALS_CONTENT": "MISSING"
     }
   }
 }
diff --git a/packages/webapp/public/locales/pt/translation.json b/packages/webapp/public/locales/pt/translation.json
@@ -2080,7 +2080,7 @@
   "BADGE": {
     "BETA": {
       "TITLE": "MISSING",
-      "CONTENT": "MISSING"
+      "ANIMALS_CONTENT": "MISSING"
     }
   }
 }
diff --git a/packages/webapp/src/App.jsx b/packages/webapp/src/App.jsx
@@ -28,6 +28,7 @@ import { ANIMALS_INVENTORY_URL } from './util/siteMapConstants';
 
 function App() {
   const [isCompactSideMenu, setIsCompactSideMenu] = useState(false);
+  const [isFeedbackSurveyOpen, setFeedbackSurveyOpen] = useState(false);
   const FULL_WIDTH_ROUTES = ['/map', ANIMALS_INVENTORY_URL];
   const isFullWidth = FULL_WIDTH_ROUTES.some((path) => matchPath(history.location.pathname, path));
 
@@ -38,6 +39,8 @@ function App() {
           history={history}
           isCompactSideMenu={isCompactSideMenu}
           setIsCompactSideMenu={setIsCompactSideMenu}
+          isFeedbackSurveyOpen={isFeedbackSurveyOpen}
+          setFeedbackSurveyOpen={setFeedbackSurveyOpen}
         >
           <div className={clsx(styles.app, isFullWidth && styles.fullWidthApp)}>
             <OfflineDetector />
@@ -53,7 +56,11 @@ function App() {
               // https://notistack.com/features/customization#custom-component
               Components={{ common: NotistackSnackbar }}
             >
-              <Routes isCompactSideMenu={isCompactSideMenu} />
+              <Routes
+                isCompactSideMenu={isCompactSideMenu}
+                isFeedbackSurveyOpen={isFeedbackSurveyOpen}
+                setFeedbackSurveyOpen={setFeedbackSurveyOpen}
+              />
             </SnackbarProvider>
           </div>
         </Navigation>

diff --git a/packages/webapp/src/components/Badge/index.tsx b/packages/webapp/src/components/Badge/index.tsx
@@ -26,14 +26,20 @@ export interface BadgeProps {
   showIcon?: boolean;
   isMenuItem?: boolean;
   position?: 'left' | 'right';
+  id?: string;
+  classes?: {
+    iconButton: string;
+  };
 }
 
 const Badge: React.FC<BadgeProps> = ({
   title,
   content = '',
   showIcon = true,
   isMenuItem = false,
-  position = 'right',
+  position,
+  id,
+  classes,
 }) => {
   const [open, setOpen] = useState<boolean>(false);
   const [focus, setFocus] = useState<boolean>(false);
@@ -90,11 +96,13 @@ const Badge: React.FC<BadgeProps> = ({
         slotProps={slotProps}
       >
         <IconButton
+          id={id}
           className={clsx(
             styles.badge,
             focus && styles.focus,
-            !isMenuItem && styles[position + 'Position'],
+            !isMenuItem && position && styles[position + 'Position'],
             isMenuItem && styles.menuItem,
+            classes?.iconButton,
           )}
           onClick={(e) => {
             if (showIcon) {

diff --git a/packages/webapp/src/components/Form/Button/index.tsx b/packages/webapp/src/components/Form/Button/index.tsx
@@ -17,7 +17,7 @@ import React, { ReactNode } from 'react';
 import styles from './button.module.scss';
 import clsx from 'clsx';
 
-type ButtonProps = {
+export type ButtonProps = {
   color?: 'primary' | 'secondary' | 'secondary-2' | 'secondary-cta' | 'warning' | 'error' | 'none';
   children?: ReactNode;
   sm?: boolean;

diff --git a/packages/webapp/src/components/Navigation/TopMenu/TopMenu.jsx b/packages/webapp/src/components/Navigation/TopMenu/TopMenu.jsx
@@ -38,7 +38,15 @@ import clsx from 'clsx';
 import styles from './styles.module.scss';
 import FeedbackSurvey from '../../../containers/FeedbackSurvey';
 
-const TopMenu = ({ history, isMobile, showNavActions, onClickBurger, showNav }) => {
+const TopMenu = ({
+  history,
+  isMobile,
+  showNavActions,
+  onClickBurger,
+  showNav,
+  isFeedbackSurveyOpen,
+  setFeedbackSurveyOpen,
+}) => {
   const { t } = useTranslation(['translation']);
   const profileIconRef = useRef(null);
   const selectedLanguage = getLanguageFromLocalStorage();
@@ -244,7 +252,10 @@ const TopMenu = ({ history, isMobile, showNavActions, onClickBurger, showNav })
       >
         <ProfilePicture />
       </IconButton>
-      <FeedbackSurvey />
+      <FeedbackSurvey
+        isFeedbackSurveyOpen={isFeedbackSurveyOpen}
+        setFeedbackSurveyOpen={setFeedbackSurveyOpen}
+      />
       {isMobile ? drawerMenu : floaterMenu}
     </>
   );

diff --git a/packages/webapp/src/components/Navigation/index.jsx b/packages/webapp/src/components/Navigation/index.jsx
@@ -22,6 +22,8 @@ export default function PureNavigation({
   children,
   isCompactSideMenu,
   setIsCompactSideMenu,
+  isFeedbackSurveyOpen,
+  setFeedbackSurveyOpen,
 }) {
   // This namespacing is needed for translations to work throughout the app
   const { t } = useTranslation([
@@ -80,6 +82,8 @@ export default function PureNavigation({
           showNavActions={showNavActions}
           onClickBurger={openSideMenu}
           showNav={showNav}
+          isFeedbackSurveyOpen={isFeedbackSurveyOpen}
+          setFeedbackSurveyOpen={setFeedbackSurveyOpen}
         />
         {children}
       </div>

diff --git a/packages/webapp/src/components/Navigation/styles.module.scss b/packages/webapp/src/components/Navigation/styles.module.scss
@@ -13,6 +13,8 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
+ @import '@assets/mixin.scss';
+
 .mainColumn {
   display: flex;
   flex-direction: column;
@@ -23,3 +25,21 @@
   overflow: clip;
   min-width: 0;
 }
+
+.animalInventoryTitle {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}
+
+.badge {
+  @include xs-breakpoint {
+    order: 1;
+  }
+}
+
+.text {
+  @include xs-breakpoint {
+    order: 2;
+  }
+}
diff --git a/packages/webapp/src/components/Navigation/useSectionHeaders.tsx b/packages/webapp/src/components/Navigation/useSectionHeaders.tsx
@@ -23,6 +23,7 @@ import { useTranslation, Trans } from 'react-i18next';
 import type { Pathname } from 'history';
 import Badge from '../Badge';
 import React from 'react';
+import styles from './styles.module.scss';
 
 // Key value pair for path and its header
 interface PathHeaderKVP {
@@ -45,13 +46,17 @@ export function useSectionHeader(path: Pathname): string | React.ReactElement |
   const { t } = useTranslation(['translation']);
 
   const animalInventoryTitle = (
-    <>
-      {t('SECTION_HEADER.ANIMALS_INVENTORY')}
+    <div className={styles.animalInventoryTitle}>
+      <div className={styles.text}>{t('SECTION_HEADER.ANIMALS_INVENTORY')}</div>
       <Badge
         title={t('BADGE.BETA.TITLE')}
-        content={<Trans i18nKey={'BADGE.BETA.CONTENT'} components={{ a: <a href="#" /> }} />}
+        content={
+          <Trans i18nKey={'BADGE.BETA.ANIMALS_CONTENT'} components={{ a: <a href="#" /> }} />
+        }
+        id="animalsBeta"
+        classes={{ iconButton: styles.badge }}
       />
-    </>
+    </div>
   );
 
   const HEADERS_BY_PATH: PathHeaderKVP = {

diff --git a/packages/webapp/src/components/TourProviderWrapper/TourProviderWrapper.tsx b/packages/webapp/src/components/TourProviderWrapper/TourProviderWrapper.tsx
@@ -9,7 +9,7 @@ import React, { ReactNode, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Label, Semibold } from '../Typography';
 import { colors } from '../../assets/theme';
-import Button from '../Form/Button';
+import Button, { ButtonProps } from '../Form/Button';
 import styles from './styles.module.scss';
 
 const opositeSide = {
@@ -98,6 +98,7 @@ type TourContentBodyStep = {
   isOrdered?: boolean;
   list?: ReactNode[];
   buttonText?: ReactNode;
+  buttonProps?: ButtonProps;
   icon?: ReactNode;
   onNext?(): void;
 };
@@ -108,13 +109,15 @@ type TourProviderWrapperProps = ReactourChildrenWrapperProps &
   Omit<ProviderProps, 'children' | 'steps'> & {
     steps: Step[];
     onFinish?(): void;
+    showCloseButton?: boolean;
   };
 
 export function TourProviderWrapper({
   steps,
   children = <div />,
   open,
   onFinish,
+  showCloseButton = false,
   ...props
 }: TourProviderWrapperProps) {
   if (!open) return children;
@@ -151,10 +154,14 @@ export function TourProviderWrapper({
       }}
       showBadge={false}
       showNavigation={false}
-      showCloseButton={false}
+      showCloseButton={showCloseButton}
       defaultOpen={open}
       steps={processedSteps}
       className={styles.popover}
+      onClickClose={({ setIsOpen }) => {
+        setIsOpen(false);
+        onFinish?.();
+      }}
       {...props}
     >
       <ReactourChildrenWrapper open={open}>{children}</ReactourChildrenWrapper>
@@ -183,7 +190,7 @@ type TourContentBodyProps = {
 };
 
 export function TourContentBody({
-  step: { title, children, contents, isOrdered, list, buttonText, icon, onNext },
+  step: { title, children, contents, isOrdered, list, buttonText, buttonProps, icon, onNext },
   continuous,
   primaryProps,
   isLastStep,
@@ -202,6 +209,7 @@ export function TourContentBody({
     }
     onNext?.();
   };
+
   return (
     <>
       {!!title && (
@@ -247,6 +255,7 @@ export function TourContentBody({
             sm
             id={continuous ? 'next' : 'close'}
             {...primaryProps}
+            {...buttonProps}
           >
             {buttonText || (isLastStep ? t('common:GOT_IT') : t('common:NEXT'))}
           </Button>