LF-5380: Add certifications section to market directory

packages/webapp/src/components/Certifications/CertificationsEmptyState.tsx

@@ -14,22 +14,25 @@
  */
 
 import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';
 import { ReactComponent as AwardIcon } from '../../assets/images/nav/certifications.svg';
 import { ReactComponent as PlusCircleIcon } from '../../assets/images/plus-circle.svg';
 import Button from '../Form/Button';
 import styles from './index.module.scss';
 
 interface CertificationsEmptyStateProps {
   onAddCertification: () => void;
+  className?: string;
 }
 
 export default function CertificationsEmptyState({
   onAddCertification,
+  className,
 }: CertificationsEmptyStateProps) {
   const { t } = useTranslation(['translation', 'common']);
 
   return (
-    <div className={styles.emptyState}>
+    <div className={clsx(styles.emptyState, className)}>
       <AwardIcon className={styles.emptyIcon} aria-hidden />
       <p className={styles.emptyHeading}>{t('CERTIFICATION.EMPTY_STATE.HEADING')}</p>
       <p className={styles.emptyBody}>{t('CERTIFICATION.EMPTY_STATE.BODY')}</p>

packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/Certifications/index.tsx

@@ -0,0 +1,69 @@
+/*
+ *  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 clsx from 'clsx';
+import { useHistory } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { toCertificationItems } from '../../../../Certifications/utils';
+import CertificationsEmptyState from '../../../../../components/Certifications/CertificationsEmptyState';
+import CertificationCard, {
+  getCertificationStatus,
+} from '../../../../../components/Certifications/CertificationCard';
+import {
+  Certification,
+  SupportedCertificationSystemType,
+  SupportedCertifier,
+} from '../../../../../store/api/types';
+import certificationStyles from '../../../../../components/Certifications/index.module.scss';
+import styles from './styles.module.scss';
+
+interface MarketDirectoryCertificationsProps {
+  certifications: Certification[];
+  systemTypes: SupportedCertificationSystemType[];
+  certifiers: SupportedCertifier[];
+}
+export default function MarketDirectoryCertifications({
+  certifications,
+  systemTypes,
+  certifiers,
+}: MarketDirectoryCertificationsProps) {
+  const { t } = useTranslation('common');
+  const history = useHistory();
+
+  const certificationItems = toCertificationItems(certifications, systemTypes, certifiers, t);
+
+  // Only certifications that are actually publishable (active and not expired) belong on this read-only summary
+  const publishableCertifications = certificationItems.filter(
+    (cert) =>
+      !['expired', 'pursuing'].includes(getCertificationStatus(cert.isActive, cert.expiryDate)),
+  );
+
+  return publishableCertifications.length === 0 ? (
+    <CertificationsEmptyState
+      className={styles.emptyState}
+      onAddCertification={() => history.push('/certifications/add_certification')}
+    />
+  ) : (
+    <div className={clsx(certificationStyles.listCards, certificationStyles.active, styles.list)}>
+      {publishableCertifications.map((cert) => (
+        <CertificationCard
+          key={cert.id}
+          {...cert}
+          onEdit={() => history.push(`/certifications/${cert.id}/edit_certification`)}
+        />
+      ))}
+    </div>
+  );
+}

packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/Certifications/styles.module.scss

@@ -0,0 +1,22 @@
+/*
+ *  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/>.
+ */
+
+.emptyState {
+  box-shadow: none;
+}
+
+.list {
+  padding: 32px 8px 16px 8px;
+}

packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/index.tsx

@@ -15,6 +15,7 @@
 
 import { useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { TFunction } from 'i18next';
 import clsx from 'clsx';
@@ -29,24 +30,35 @@ import { ReactComponent as CheckComplete } from '../../../../assets/images/check
 import { ReactComponent as CheckIncomplete } from '../../../../assets/images/check-incomplete.svg';
 import MarketDirectoryInfoForm from './InfoForm';
 import MarketDirectoryConsent from './Consent';
+import MarketDirectoryCertifications from './Certifications';
+import { loginSelector } from '../../../userFarmSlice';
 import { useGetMarketDirectoryInfoQuery } from '../../../../store/api/marketDirectoryInfoApi';
 import { useGetMarketProductCategoriesQuery } from '../../../../store/api/marketProductCategoryApi';
+import { useGetCertificationsQuery } from '../../../../store/api/certificationsApi';
+import {
+  useGetSupportedCertifiersQuery,
+  useGetSupportedCertificationSystemTypesQuery,
+} from '../../../../store/api/certifiersApi';
 
 // When adding/removing forms, update farmCardsLength below to match the number of enum values
 enum FormCards {
   INFO,
+  CERTIFICATIONS,
 }
 
-const farmCardsLength = 1;
+const farmCardsLength = 2;
 
 const MarketDirectory = () => {
   const history = useHistory();
   const routerTabs = useFarmSettingsRouterTabs();
   const { t } = useTranslation();
+  const { farm_id } = useSelector(loginSelector);
 
   const { expandedIds, toggleExpanded, unExpand } = useExpandable({ isSingleExpandable: true });
 
-  const [completionStatus, setCompletionStatus] = useState<Partial<Record<FormCards, boolean>>>({});
+  const [completionStatus, setCompletionStatus] = useState<Partial<Record<FormCards, boolean>>>({
+    [FormCards.CERTIFICATIONS]: true,
+  });
 
   const updateCompletionStatus = (formKey: FormCards, isComplete: boolean) => {
     setCompletionStatus((prev) => ({
@@ -68,12 +80,23 @@ const MarketDirectory = () => {
   const { data: marketProductCategories = [], isLoading: isMarketProductCategoriesLoading } =
     useGetMarketProductCategoriesQuery();
 
+  const { data: certifications = [], isLoading: isCertificationsLoading } =
+    useGetCertificationsQuery();
+  const { data: certifiers = [], isLoading: isCertifiersLoading } = useGetSupportedCertifiersQuery(
+    farm_id!,
+  );
+  const { data: systemTypes = [], isLoading: isSystemTypesLoading } =
+    useGetSupportedCertificationSystemTypesQuery(farm_id!);
+
   const isMarketDirectoryDataLoading = [
     isMarketDirectoryInfoLoading,
     isMarketProductCategoriesLoading,
     !marketProductCategories.length,
   ].some(Boolean);
 
+  const isCertificationDataLoading =
+    isCertificationsLoading || isCertifiersLoading || isSystemTypesLoading;
+
   useEffect(() => {
     if (!isMarketDirectoryInfoLoading) {
       updateCompletionStatus(FormCards.INFO, !!marketDirectoryInfo);
@@ -92,6 +115,17 @@ const MarketDirectory = () => {
         />
       ),
     },
+    {
+      key: FormCards.CERTIFICATIONS,
+      title: t('MENU.CERTIFICATIONS'),
+      content: !isCertificationDataLoading && (
+        <MarketDirectoryCertifications
+          certifications={certifications}
+          systemTypes={systemTypes}
+          certifiers={certifiers}
+        />
+      ),
+    },
   ];
 
   return (
@@ -101,29 +135,31 @@ const MarketDirectory = () => {
       <div className={styles.container}>
         <DirectoryCallout t={t} />
 
-        {formCards.map(({ key, title, content }) => {
-          const isExpanded = expandedIds.includes(key);
-
-          return (
-            <div key={key} className={clsx(styles.formCard, isExpanded && styles.expanded)}>
-              <ExpandableItem
-                itemKey={key}
-                isExpanded={isExpanded}
-                onClick={() => toggleExpanded(key)}
-                mainContent={
-                  <ExpandableHeader
-                    title={title}
-                    isExpanded={isExpanded}
-                    isComplete={completionStatus[key] || false}
-                  />
-                }
-                expandedContent={content}
-                leftCollapseIcon
-                iconClickOnly={false}
-              />
-            </div>
-          );
-        })}
+        <div className={styles.formCards}>
+          {formCards.map(({ key, title, content }) => {
+            const isExpanded = expandedIds.includes(key);
+
+            return (
+              <div key={key} className={clsx(styles.formCard, isExpanded && styles.expanded)}>
+                <ExpandableItem
+                  itemKey={key}
+                  isExpanded={isExpanded}
+                  onClick={() => toggleExpanded(key)}
+                  mainContent={
+                    <ExpandableHeader
+                      title={title}
+                      isExpanded={isExpanded}
+                      isComplete={completionStatus[key] || false}
+                    />
+                  }
+                  expandedContent={content}
+                  leftCollapseIcon
+                  iconClickOnly={false}
+                />
+              </div>
+            );
+          })}
+        </div>
 
         {areAllFormsComplete !== undefined && (
           <MarketDirectoryConsent

packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/styles.module.scss

@@ -45,6 +45,13 @@
   }
 }
 
+.formCards {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
 .formCard {
   width: 100%;
   padding: 16px;