LF-5182: TAPE Plan Phase 1 - Frontend Changes by kathyavini · Pull Request #4068 · LiteFarmOrg/LiteFarm

kathyavini · 2026-03-02T19:26:36Z

Description

Update visibility
- Hide routes/tape menu from workers or farms not in Australia
Fetch survey from DigitalOcean
- Handle API error
Update survey completion function
- Call the API to submit data instead of saving to Redux store
- Handle API error
Update tapeSurveySlice
- Remove isCompleted state and calculate it using saved survey (if exists, isCompleted is true)
- surveyData => surveyDataInProgress
- tapeSurveyStatusSelector now returns inProgress
Adjust built-in warning notification position
Comment out Step 2
Delete the Update button and logic (could be reverted: de7b624)

Note:

The result page is not responsive; will take a look.
We'll need to add the json file to DO before merging.

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

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?

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 ordered translation keys alphabetically (optional: run pnpm i18n to help with this)
I have added the GNU General Public License to all new files

Generation plus one pass for type errors

SayakaOno

This looks pretty good to me.

TODOs:

getSurveyVersion needs to be adjusted
- eg., COUNTRY_VERSIONS.includes(countryCode) ? countryCode.toLowerCase() : 'default'
getTapeSurveyData endpoint is missing
Replace tapeQuestions.json with useQuery in TAPEResults
Delete tapeQuestions.json
~~Refetch is not happening when choosing a farm in a different country?~~
How do we want to handle errors?
Test with the APIs

…frontend-changes

…ry in TapeResults

…veyApi

* add TapeRoutes and pass surveyVersion to each component * support only Australia version

…ation call

SayakaOno · 2026-03-10T22:16:37Z

packages/webapp/src/containers/Insights/index.jsx


+  const surveyVersion = getSurveyVersion(farm?.country_code);
+  const { data: tapeSurvey, isError: isTapeSurveyError } = useGetTapeSurveyQuery();
+  const isTapeSurveyCompleted = !isTapeSurveyError && !!tapeSurvey?.id;


By following these steps:
Go to an Australian farm -> Complete a survey -> go to another Australian farm
You get tapeSurvey for the previous farm although the API is refetched and returns 404. isTapeSurveyError is to prevent the wrong "completed" status.

Is there some blocking we could also do on isLoading in this view? When I switch farms, before the results data has come in (even without network throttling) I keep accidentally navigating to the survey (instead of the results view), as that is the link that is active initially until the query completes.

I think it would be better if there was no link until the query completes (or maybe no tile? I'm not really sure!) rather than give the opportunity to navigate to the wrong page. Being brought to the first page of the cleared survey made me think that the data was lost, and I think a user might think they have to take the whole survey again from the beginning, which would be pretty bad.

When current data present for farm1 and error for farm2 it shows data on the wrong farm: This seems like another showcase for why it seems important to fixi the api state when switching between farms...

The root cause of the other farms data still being present can be fixed. @SayakaOno could you please check out : #3988 .

If an extension officer or anyone helps multiple farms fill out tape surveys this likelihood increases.

@kathyavini Thank you so much for catching it! Tape's current data will be "Loading..." while fetching the results, and I disabled onClick using CSS. It would be appreciated if you could test the new UX 🙏

@Duncan-Brain I thought about that PR too. I've been looking for the right time for us to revisit it; let's do it tomorrow maybe after the release?

packages/webapp/src/containers/Insights/index.jsx

packages/webapp/src/routes/index.jsx

packages/webapp/src/routes/TapeRoutes.tsx

…frontend-changes

kathyavini

@SayakaOno I love it! This is very clean and thank you so much for handling on those crazy scope changes in the last two days, that was a very fast adjust to all of that! 🙇🙇

The only blocking part is the inherited code for the results graph -- it shouldn't be (and in this particular case, doesn't work with) parsing the survey JSON. I am sorry; I threw that fact at you in a tech daily but I should have followed up with a link or written note!

packages/webapp/src/containers/Insights/TapeSurvey/index.tsx

packages/webapp/src/containers/Insights/TapeSurvey/TapeResults.tsx

kathyavini · 2026-03-11T03:36:40Z

packages/webapp/src/containers/Insights/index.jsx


+  const surveyVersion = getSurveyVersion(farm?.country_code);
+  const { data: tapeSurvey, isError: isTapeSurveyError } = useGetTapeSurveyQuery();
+  const isTapeSurveyCompleted = !isTapeSurveyError && !!tapeSurvey?.id;


Is there some blocking we could also do on isLoading in this view? When I switch farms, before the results data has come in (even without network throttling) I keep accidentally navigating to the survey (instead of the results view), as that is the link that is active initially until the query completes.

I think it would be better if there was no link until the query completes (or maybe no tile? I'm not really sure!) rather than give the opportunity to navigate to the wrong page. Being brought to the first page of the cleared survey made me think that the data was lost, and I think a user might think they have to take the whole survey again from the beginning, which would be pretty bad.

Duncan-Brain · 2026-03-11T16:02:08Z

Seems to be working pretty well for me!

I noticed a few things:

Agree with Joyce it seems like we need to handle the case for those extra inputs. I was able to achieve over 100% when I answered the survey text inputs with a number
When I fill out the survey and accidentally press no to any terms and conditions. I cannot recover from that.
The farm data that is not removed when switching farms: I really think we should fix that resetAPIState() bug, this survey seems like a candidate where extension officers may help meaning multiple farms for a user are maybe more likely and the sharing of personal data could occur
[Future looking] Was our main goal for adding the json file to the DO bucket to avoid new releases for survey changes? If so I am wondering if we should think about adding countries and the DIMENSION_MAPPING Joyce mentions in her comment above to the surveyJson metadata. That way we would not have to re-release if those details change.

SayakaOno

Thank you so much for reviewing! 🙇 I think I've addressed everything, and the result chart should be responsive now.
Re-reviews would be appreciated 🙏

When I fill out the survey and accidentally press no to any terms and conditions. I cannot recover from that.

Do we need to handle this?

If so I am wondering if we should think about adding countries and the DIMENSION_MAPPING Joyce mentions in her comment above to the surveyJson metadata.

I agree, I'm expecting some changes in the future.

packages/webapp/src/containers/Insights/TapeSurvey/index.tsx

SayakaOno · 2026-03-11T19:19:08Z

packages/webapp/src/containers/Insights/index.jsx


+  const surveyVersion = getSurveyVersion(farm?.country_code);
+  const { data: tapeSurvey, isError: isTapeSurveyError } = useGetTapeSurveyQuery();
+  const isTapeSurveyCompleted = !isTapeSurveyError && !!tapeSurvey?.id;


@kathyavini Thank you so much for catching it! Tape's current data will be "Loading..." while fetching the results, and I disabled onClick using CSS. It would be appreciated if you could test the new UX 🙏

@Duncan-Brain I thought about that PR too. I've been looking for the right time for us to revisit it; let's do it tomorrow maybe after the release?

kathyavini · 2026-03-11T20:07:40Z

@SayakaOno I approve this PR!

Please merge whenever ready ❤️ You can also retag if you want to add any further responsivity adjusts first. I can't believe it -- I had just assumed the chart was non-responsive instead of trying throwing it in a responsive container 😭

The new UX of the loading state on the insights tile is perfect 👌

* Add insightContainer style to the wrappers * Update results chart labels style, add overflow scroll

SayakaOno · 2026-03-11T22:51:10Z

Thank you @kathyavini for testing!
I added a commit for the style adjustment. Thank you for re-reviewing 🙏

I also found a bug that the survey is not available right after creating a farm in Australia. I'll open another PR for the fix.

kathyavini

Oh that looks so much better!!! 🔥🔥🔥

I also found a bug that the survey is not available right after creating a farm in Australia. I'll open another PR for the fix.

Really?? I made a new farm when testing this yesterday. I'll check it out in the new PR 🙏

Please do approve and merge ☑️

kathyavini · 2026-03-11T22:59:05Z

packages/webapp/src/containers/Insights/TapeSurvey/TapeResults.tsx

+            const words = label.split(' ');
+            const splitIndex = words.length === 1 ? 1 : Math.floor(words.length / 2);
+
+            return [words.slice(0, splitIndex).join(' '), words.slice(splitIndex).join(' ')];


Oh it takes arrays for the labels! Thank you for figuring that out ❤️

LF-5182 Commit phase 1 agent completion

1f92f55

Generation plus one pass for type errors

kathyavini requested review from a team as code owners March 2, 2026 19:26

kathyavini requested review from SayakaOno and removed request for a team March 2, 2026 19:26

SayakaOno reviewed Mar 2, 2026

View reviewed changes

SayakaOno added 23 commits March 2, 2026 15:34

Merge branch 'integration' into LF-5182-experiment-tape-plan-phase-1-…

ceba077

…frontend-changes

LF-5182 Adjust getSurveyVersion

69e9dce

LF-5182 Add useTapeSurveyJsonForFarmCountry hook

73aae23

LF-5182 Use useTapeSurveyJsonForFarmCountry hook in TAPESurvey

ccf2d7b

LF-5182 Replace tapeQuestions.json with useTapeSurveyJsonForFarmCount…

8ae4dc9

…ry in TapeResults

LF-5182 Update survey json path, add useGetTapeSurveyQuery in tapeSur…

8176e0d

…veyApi

LF-5182 Get isTapeSurveyCompleted status from via the API

cbfa4f2

LF-5182 Export prefetch from tapeSurveyApi

dc22279

LF-5182 Adjust handleComplete

aa8808b

LF-5182 Adjust tapeSurveyStatusSelector

a0ad9b2

LF-5182 Update tapeSurveyStatusSelector

de015c3

LF-5182 Fix initialData in TAPESurvey

a89b028

LF-5182 Fix tape's insightData

9c63f5b

LF-5182 Pass isCompactSideMenu prop to TapeSurvey in routes

301adda

LF-5182 Adjust the survey.js error position

3a58c8d

LF-5182 Handle survey json loading error with snackbar

759f726

LF-5182 Refactor tape

cc9fb45

* add TapeRoutes and pass surveyVersion to each component * support only Australia version

LF-5182 Remove useTapeSurveyJsonForFarmCountry hook

412f230

LF-5182 Conditionally show TAPE in insights

273c164

LF-5182 Update TapeResults to use surveyData in DB

1dfb67f

LF-5182 Update tapeSurveySlice

52dec6d

LF-5182 Update and add function to reopen survey

cd441fe

LF-5182 Update submitTapeSurvey endpoint in tapeSurveyApi, update mut…

44ad39d

…ation call

SayakaOno marked this pull request as draft March 9, 2026 19:38

SayakaOno added 3 commits March 10, 2026 13:31

Comment out TapeSurvey Step 2

1176ae1

LF-5182 Fix isTapeSurveyCompleted condition

172e8e2

LF-5182 Remove code for TAPE survey update

de7b624

SayakaOno force-pushed the LF-5182-experiment-tape-plan-phase-1-frontend-changes branch from 4f80b54 to de7b624 Compare March 10, 2026 21:12

SayakaOno added 3 commits March 10, 2026 14:19

LF-5182 Restore comment

f6c4421

LF-5182 Redirect user to survey when surveyData doesn't exist

319686a

LF-5182 Handle TAPE results errors

575498a

SayakaOno changed the title ~~LF-5182 (Experiment) TAPE Plan Phase 1 - Frontend Changes~~ LF-5182: TAPE Plan Phase 1 - Frontend Changes Mar 10, 2026

SayakaOno added the enhancement New feature or request label Mar 10, 2026

SayakaOno self-assigned this Mar 10, 2026

SayakaOno reviewed Mar 10, 2026

View reviewed changes

SayakaOno marked this pull request as ready for review March 10, 2026 22:23

Merge branch 'integration' into LF-5182-experiment-tape-plan-phase-1-…

c37a76f

…frontend-changes

kathyavini commented Mar 11, 2026

View reviewed changes

LF-5182 Remove Tape survey step 2 code

e9d1fff

Duncan-Brain mentioned this pull request Mar 11, 2026

LF-5100 - Switch from invalidateTags() to resetApiState() when switching farms #3988

Open

16 tasks

SayakaOno added 3 commits March 11, 2026 10:31

LF-5182 Update Tape result calculation

3dc6153

LF-5182 Disable TAPE menu onClick while fetching

3243b03

LF-5182 Make TapeResults chart responsive

cc9a2f5

SayakaOno reviewed Mar 11, 2026

View reviewed changes

LF-5182 Adjust TAPE components styles

1a87abb

* Add insightContainer style to the wrappers * Update results chart labels style, add overflow scroll

kathyavini commented Mar 11, 2026

View reviewed changes

SayakaOno approved these changes Mar 11, 2026

View reviewed changes

SayakaOno added this pull request to the merge queue Mar 11, 2026

Merged via the queue into integration with commit 29af938 Mar 11, 2026
4 checks passed

SayakaOno deleted the LF-5182-experiment-tape-plan-phase-1-frontend-changes branch March 11, 2026 23:19

Conversation

kathyavini commented Mar 2, 2026 • edited by SayakaOno Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SayakaOno left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SayakaOno Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

kathyavini Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Duncan-Brain Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

SayakaOno Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kathyavini left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kathyavini Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Duncan-Brain commented Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SayakaOno left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

SayakaOno Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

kathyavini commented Mar 11, 2026

Uh oh!

SayakaOno commented Mar 11, 2026

Uh oh!

kathyavini left a comment

Choose a reason for hiding this comment

Uh oh!

kathyavini Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kathyavini commented Mar 2, 2026 •

edited by SayakaOno

Loading

SayakaOno left a comment •

edited

Loading

kathyavini left a comment •

edited

Loading

Duncan-Brain commented Mar 11, 2026 •

edited

Loading