LF-5182: TAPE Plan Phase 1 - Frontend Changes

packages/webapp/src/apiConfig.js

@@ -98,6 +98,7 @@ export const marketProductCategoryUrl = `${URI}/market_product_categories`;
 export const marketDirectoryPartnersUrl = `${URI}/market_directory_partners`;
 export const supportTicketUrl = `${URI}/support_ticket`;
 export const offlineEventLogUrl = `${URI}/offline_event_log`;
+export const tapeSurveyUrl = `${URI}/tape_survey`;
 
 export const url = URI;
 

packages/webapp/src/containers/Insights/TapeSurvey/getSurveyVersion.ts

@@ -0,0 +1,27 @@
+/*
+ *  Copyright 2026 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/>.
+ */
+
+/**
+ * Returns the survey version key used to fetch the correct JSON from DO CDN,
+ * based on the farm's 2-letter ISO country code.
+ *
+ * To add a new country-specific version:
+ * 1. Upload `tape-surveys/v1/<key>.json` to the DO Spaces bucket.
+ * 2. Add a case here mapping the relevant country_code(s) to that key.
+ */
+export const getSurveyVersion = (countryCode: string | undefined): string => {
+  if (countryCode === 'US') return 'us';
+  return 'default';
+};

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

@@ -18,17 +18,41 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useTapeSurveyPrepopulatedData } from './useTapeSurveyPrepopulatedData';
-import { saveSurveyProgress, completeSurvey, tapeSurveySelector } from './tapeSurveySlice';
+import {
+  saveSurveyProgress,
+  completeSurvey,
+  clearSurvey,
+  tapeSurveySelector,
+} from './tapeSurveySlice';
 import SurveyComponent from '../../../components/SurveyComponent';
-import surveyJson from './tapeQuestions.json';
 import PageTitle from '../../../components/PageTitle';
+import { userFarmSelector } from '../../userFarmSlice';
+import {
+  useGetTapeSurveyJsonQuery,
+  useSubmitTapeSurveyMutation,
+} from '../../../store/api/tapeSurveyApi';
+import { getSurveyVersion } from './getSurveyVersion';
+import { enqueueErrorSnackbar } from '../../Snackbar/snackbarSlice';
 
 function TAPESurvey() {
   const { t } = useTranslation();
   const history = useHistory();
   const dispatch = useDispatch();
 
-  const { prepopulatedData, isLoading } = useTapeSurveyPrepopulatedData();
+  const { prepopulatedData, isLoading: isPrepopulatedDataLoading } =
+    useTapeSurveyPrepopulatedData();
+
+  // @ts-expect-error -- userFarmSelector issue
+  const { country_code } = useSelector(userFarmSelector);
+  const versionKey = getSurveyVersion(country_code);
+
+  const {
+    data: surveyJson,
+    isLoading: isSurveyJsonLoading,
+    isError: isSurveyJsonError,
+  } = useGetTapeSurveyJsonQuery(versionKey);
+
+  const [submitTapeSurvey] = useSubmitTapeSurveyMutation();
 
   const { surveyData: savedData, currentPageNo: savedPageNo } = useSelector(tapeSurveySelector);
 
@@ -38,15 +62,39 @@ function TAPESurvey() {
     dispatch(saveSurveyProgress({ currentPageNo, surveyData }));
   }, []);
 
-  const handleComplete = useCallback((currentPageNo: number, surveyData: any) => {
-    dispatch(completeSurvey({ currentPageNo, surveyData }));
-    history.push('/insights/tape/results');
-  }, []);
+  const handleComplete = useCallback(
+    async (currentPageNo: number, surveyData: any) => {
+      // Persist completion state immediately so TapeResults has data during the transition.
+      dispatch(completeSurvey({ currentPageNo, surveyData }));
+      try {
+        await submitTapeSurvey({ survey_data: surveyData }).unwrap();
+        // TODO: Once TapeResults reads from RTK Query cache instead of Redux, remove this
+        // clearSurvey call (or move it to after TapeResults has rendered from the cache).
+        dispatch(clearSurvey());
+        history.push('/insights/tape/results');
+      } catch {
+        // Submission failed; data stays in Redux so the user can retry.
+        dispatch(enqueueErrorSnackbar(t('INSIGHTS.TAPE.SUBMIT_ERROR')));
+      }
+    },
+    [submitTapeSurvey, dispatch, history, t],
+  );
+
+  const isLoading = isPrepopulatedDataLoading || isSurveyJsonLoading;
+
+  if (isSurveyJsonError) {
+    return (
+      <>
+        <PageTitle title={t('INSIGHTS.TAPE.TITLE')} backUrl="/Insights" />
+        <p>{t('INSIGHTS.TAPE.LOAD_ERROR')}</p>
+      </>
+    );
+  }
 
   return (
     <>
       <PageTitle title={t('INSIGHTS.TAPE.TITLE')} backUrl="/Insights" />
-      {!isLoading && ( // wait for prepopulated data to load
+      {!isLoading && surveyJson && (
         <SurveyComponent
           surveyJson={surveyJson}
           onComplete={handleComplete}

packages/webapp/src/store/api/apiTags.ts

@@ -54,6 +54,7 @@ export const FarmTags = [
   'SensorReadings',
   'Weather',
   'MarketDirectoryInfo',
+  'TapeSurvey',
 ] as const;
 
 /**

packages/webapp/src/store/api/tapeSurveyApi.ts

@@ -0,0 +1,58 @@
+/*
+ *  Copyright 2026 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 { api } from './apiSlice';
+import { tapeSurveyUrl } from '../../apiConfig';
+import { DO_CDN_URL } from '../../util/constants';
+
+export interface TapeSurveyRecord {
+  tape_survey_id: number;
+  farm_id: string;
+  user_id: string;
+  survey_data: Record<string, any>;
+}
+
+export const tapeSurveyApi = api.injectEndpoints({
+  endpoints: (build) => ({
+    // Fetches the SurveyJS JSON definition from DO CDN.
+    // Uses queryFn (not query) because this bypasses the LiteFarm API base URL and auth headers.
+    getTapeSurveyJson: build.query<Record<string, any>, string>({
+      queryFn: async (versionKey) => {
+        try {
+          const response = await fetch(`${DO_CDN_URL}/tape-surveys/v1/${versionKey}.json`);
+          if (!response.ok) {
+            return {
+              error: { status: response.status, data: `Failed to fetch survey JSON` },
+            };
+          }
+          const data = await response.json();
+          return { data };
+        } catch (error) {
+          return { error: { status: 'FETCH_ERROR', error: String(error) } };
+        }
+      },
+    }),
+    submitTapeSurvey: build.mutation<TapeSurveyRecord, { survey_data: Record<string, any> }>({
+      query: (body) => ({
+        url: tapeSurveyUrl,
+        method: 'POST',
+        body,
+      }),
+      invalidatesTags: ['TapeSurvey'],
+    }),
+  }),
+});
+
+export const { useGetTapeSurveyJsonQuery, useSubmitTapeSurveyMutation } = tapeSurveyApi;