LiteFarmOrg · SayakaOno · Mar 11, 2026 · Mar 2, 2026 · Mar 2, 2026 · Mar 2, 2026
@@ -1164,7 +1164,9 @@
     "TAPE": {
       "COMPLETED": "Completed - See your results",
       "IN_PROGRESS": "In progress",
+      "LOAD_ERROR": "Failed to load survey. Please try again later.",
       "NOT_FILLED": "Not filled",
+      "RESULTS_LOAD_ERROR": "Failed to load results. Please try again later.",
       "RESULTS_TITLE": "Characterization of the Agroecological Transitions (CAET) Scores",
       "TITLE": "TAPE Survey (Tool for Agroecology Performance Evaluation)",
       "UPDATE_ANSWERS": "Update your answers"

@@ -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;
 

@@ -14,14 +14,14 @@
  */
 
 import { useCallback, useEffect, useMemo } from 'react';
-import { Model } from 'survey-core';
+import { CompleteEvent, Model } from 'survey-core';
 import { Survey } from 'survey-react-ui';
 import { DefaultLight } from 'survey-core/themes';
 import 'survey-core/survey-core.css';
 
 interface SurveyComponentProps {
   surveyJson: any; // Survey JSON schema object
-  onComplete: (currentPageNo: number, surveyData: any) => void;
+  onComplete: (surveyData: any, options: CompleteEvent) => void;
   initialData?: Record<string, any>;
   initialPageNo?: number;
   onCurrentPageChanged?: (currentPageNo: number, surveyData: Record<string, any>) => void;
@@ -62,9 +62,9 @@ export default function SurveyComponent({
 
   // https://surveyjs.io/form-library/documentation/get-started-react
   const handleComplete = useCallback(
-    (surveyModel: Model) => {
-      const { currentPageNo, surveyData } = extractSurveyState(surveyModel);
-      onComplete(currentPageNo, surveyData);
+    (surveyModel: Model, options: CompleteEvent) => {
+      const { surveyData } = extractSurveyState(surveyModel);
+      onComplete(surveyData, options);
     },
     [onComplete],
   );

@@ -13,7 +13,8 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-import { useSelector, useDispatch } from 'react-redux';
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import { Radar } from 'react-chartjs-2';
@@ -25,72 +26,18 @@ import {
   Filler,
   Tooltip,
 } from 'chart.js';
-import { tapeSurveySelector, reopenSurvey } from './tapeSurveySlice';
 import styles from './styles.module.scss';
+import insightStyles from '../styles.module.scss';
 import { Semibold } from '../../../components/Typography';
 import PageTitle from '../../../components/PageTitle';
-import TapeQuestions from './tapeQuestions.json';
 import { roundToOne } from '../../../util/rounding';
-import Button from '../../../components/Form/Button';
-import { ReactComponent as EditIcon } from '../../../assets/images/edit.svg';
+import { useGetTapeSurveyQuery } from '../../../store/api/tapeSurveyApi';
+import { enqueueErrorSnackbar, snackbarSelector } from '../../Snackbar/snackbarSlice';
 
 const CHART_COLOR = 'rgba(85, 143, 112, 1)'; // --Colors-Secondary-Secondary-green-700
 const CHART_FILL_COLOR = 'rgba(85, 143, 112, 0.2)'; // reduced opacity
 const MAX_SCORE = 100;
-
-const STEP_TWO_SURVEY_NAMES = [
-  'Qualitative economic indicator',
-  'Land tenure',
-  'Food and nutrition',
-  'Dietary diversity',
-  'Youth employment and aspiration',
-  'Soil health',
-];
-
-const getChartTitleFromSurveyTitle = (surveyTitle: unknown) => {
-  if (!surveyTitle || typeof surveyTitle !== 'string') return '';
-
-  // Remove the section number from the title
-  const titleWithoutSectionNumber = surveyTitle.split(/\s+/).slice(1).join(' ');
-
-  if (titleWithoutSectionNumber === '') return '';
-
-  return (
-    titleWithoutSectionNumber.charAt(0).toUpperCase() +
-    titleWithoutSectionNumber.slice(1).toLowerCase()
-  );
-};
-
-const getAnswerKeys = (element: any): string[] => {
-  if (Array.isArray(element.elements)) {
-    return element.elements.flatMap(getAnswerKeys);
-  }
-  return element.name ? [element.name] : [];
-};
-
-const CHOSEN_SECTION_NAMES = [
-  'diversity',
-  'synergy',
-  'recycling',
-  'efficiency',
-  'resilience',
-  'culture_and_food',
-  'cocreation_and_knowledge',
-  'human_and_social',
-  'responsible_governance',
-];
-
-const CHART_SECTION_DATA = TapeQuestions.pages.reduce<ChartSection[]>((acc, cv) => {
-  if (CHOSEN_SECTION_NAMES.includes(cv.name)) {
-    acc.push({
-      dimension: getChartTitleFromSurveyTitle(cv.title),
-      answerKeys: getAnswerKeys(cv),
-      maxScore: MAX_SCORE,
-    });
-    return acc;
-  }
-  return acc;
-}, []);
+const RAW_MAX_SCORE = 4;
 
 ChartJS.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip);
 
@@ -105,9 +52,26 @@ function TAPEResults() {
   const history = useHistory();
   const dispatch = useDispatch();
 
-  const { surveyData } = useSelector(tapeSurveySelector);
-
-  const tapeData = analyzeTAPEData(surveyData);
+  const { data: surveyData, error: surveyDataError } = useGetTapeSurveyQuery();
+  const { survey_response } = surveyData || {};
+  const notifications: { message: string }[] = useSelector(snackbarSelector);
+
+  useEffect(() => {
+    // Redirect back to survey page if no saved survey data is found
+    // (e.g. if user tries to access results page directly without completing survey)
+    if (surveyDataError && 'status' in surveyDataError && surveyDataError?.status === 404) {
+      history.replace('/Insights/tape');
+    } else if (surveyDataError) {
+      const activeError = notifications.find(
+        ({ message }) => message === t('INSIGHTS.TAPE.RESULTS_LOAD_ERROR'),
+      );
+      if (!activeError) {
+        dispatch(enqueueErrorSnackbar(t('INSIGHTS.TAPE.RESULTS_LOAD_ERROR')));
+      }
+    }
+  }, [surveyDataError]);
+
+  const tapeData = survey_response ? analyzeTAPEData(survey_response) : [];
 
   const chartData = {
     labels: tapeData.map((d) => d.dimension),
@@ -140,6 +104,13 @@ function TAPEResults() {
           font: {
             size: 14,
           },
+          // Splits labels into a maximum of 2 lines (assumes English labels)
+          callback: (label: any) => {
+            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(' ')];
+          },
         },
       },
     },
@@ -152,65 +123,56 @@ function TAPEResults() {
     },
   };
 
-  const returnToSurvey = () => {
-    dispatch(reopenSurvey());
-    history.push('/insights/tape');
-  };
-
   return (
-    <>
+    <div className={insightStyles.insightContainer}>
       <PageTitle title={t('INSIGHTS.TAPE.TITLE')} backUrl="/Insights" />
       <div className={styles.resultsContainer}>
         <div className={styles.sectionContainer}>
-          <div className={styles.buttonContainer}>
-            <Button sm color="secondary-2" onClick={returnToSurvey}>
-              {t('INSIGHTS.TAPE.UPDATE_ANSWERS')}
-              <EditIcon className={styles.editIcon} />
-            </Button>
-          </div>
           <Semibold className={styles.titleText}>{t('INSIGHTS.TAPE.RESULTS_TITLE')}</Semibold>
-          {tapeData && tapeData.length > 0 && (
-            <div className={styles.chartContainer}>
-              <Radar data={chartData} options={options} />
-            </div>
-          )}
-        </div>
-        <div className={styles.sectionContainer}>
-          <Semibold className={styles.titleText}>Step 2 - Core Criteria of Performance</Semibold>
-          <div className={styles.stepTwoButtonContainer}>
-            {
-              /* Placeholders for Step 2 content. Ultimately these will link to distinct surveys for each section */
-              STEP_TWO_SURVEY_NAMES.map((name) => (
-                <Button key={name} sm color="secondary">
-                  {name}
-                </Button>
-              ))
-            }
+          <div className={styles.chartContainerWrapper}>
+            {tapeData && tapeData.length > 0 && (
+              <div className={styles.chartContainer}>
+                <Radar data={chartData} options={options} />
+              </div>
+            )}
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 }
-interface ChartSection {
-  dimension: string;
-  answerKeys: string[];
-  maxScore: number;
-}
+
+const DIMENSION_MAPPING = {
+  Diversity: 'diversity_1',
+  Synergy: 'synergy_2',
+  Recycling: 'recycling_3',
+  Efficiency: 'efficiency_4',
+  Resilience: 'resilience_5',
+  'Culture and food traditions': 'culture_6',
+  'Co-creation and sharing of knowledge': 'knowledge_7',
+  'Human and social values': 'human_8',
+  'Circular economy and solidarity': 'circular_9',
+  'Responsible governance': 'governance_10',
+};
 
 const analyzeTAPEData = (data: any): TAPEDimension[] => {
   if (!data) return [];
 
-  return CHART_SECTION_DATA.map(({ dimension, answerKeys, maxScore }) => {
+  return Object.entries(DIMENSION_MAPPING).map(([dimension, prefix]) => {
+    const scores = Object.keys(data)
+      .filter((key) => key.startsWith(prefix))
+      .map((key) => Number(data[key]) || 0);
+
+    if (!scores.length) {
+      return { dimension, score: 0, maxScore: MAX_SCORE };
+    }
+
+    const averageRawScore = scores.reduce((sum, value) => sum + value, 0) / scores.length;
+
     return {
       dimension,
-      score:
-        25 *
-        (answerKeys.reduce<number>((acc, cv) => {
-          return data[cv] ? acc + Number(data[cv]) : acc;
-        }, 0) /
-          answerKeys.length), // simple average
-      maxScore,
+      score: (averageRawScore / RAW_MAX_SCORE) * MAX_SCORE,
+      maxScore: MAX_SCORE,
     };
   });
 };

@@ -0,0 +1,30 @@
+/*
+ *  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/>.
+ */
+
+const COUNTRY_VERSIONS = ['AU'];
+
+/**
+ * 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/<key>.json` to the DO Spaces bucket.
+ * 2. Add a country_code to `COUNTRY_VERSIONS`.
+ */
+export const getSurveyVersion = (countryCode: string | undefined): string | undefined => {
+  return countryCode && COUNTRY_VERSIONS.includes(countryCode)
+    ? countryCode.toLowerCase()
+    : undefined;
+};