@treely/strapi-slices 5.15.1 → 5.17.0

package/dist/strapi-slices.esm.js

@@ -2,7 +2,7 @@ import axios from 'axios';
 import qs from 'qs';
 import { setupCache } from 'axios-cache-interceptor';
 import React, { useState, useRef, useMemo, useCallback, useEffect, Fragment, createRef, createContext, useContext } from 'react';
-import { Box, BoemlyAlert, BoemlyModal, Flex, IconButton, useMediaQuery, DefaultSectionContainer, Wrapper, DefaultSectionHeader, Button, Gradient, Spacer, SimpleGrid, Heading, Text, useToken, Grid, GridItem, BoemlyList, PortfolioCard, RichText, BoemlyAccordion, HeroCard, Shape, QuoteCard, Center, ShapesCard, TextCardWithIcon, ContactArea, ProjectCard, Tag, Link as Link$1, DatePersonPair, BoemlyThemeProvider, Badge, useDisclosure, Container, AvatarWithName, Divider, LabelNumberPair, BoemlyFormControl, InputRightAddon, LabelTextPair, Tooltip } from 'boemly';
+import { Box, BoemlyAlert, BoemlyModal, Flex, IconButton, useMediaQuery, DefaultSectionContainer, Wrapper, DefaultSectionHeader, Button, Gradient, Spacer, SimpleGrid, Heading, Text, useToken, Grid, GridItem, BoemlyList, PortfolioCard, RichText, BoemlyAccordion, HeroCard, Shape, QuoteCard, Center, ShapesCard, TextCardWithIcon, ContactArea, Tag, Container, ProjectCard, Link as Link$1, DatePersonPair, BoemlyThemeProvider, useDisclosure, AvatarWithName, Divider, Badge, LabelNumberPair, BoemlyFormControl, InputRightAddon, LabelTextPair, Tooltip } from 'boemly';
 import Head from 'next/head';
 import Image from 'next/image';
 import { useLockBodyScroll, useKey, useWindowScroll, useWindowSize, useMeasure, useCopyToClipboard } from 'react-use';
@@ -13,7 +13,7 @@ import { useRouter } from 'next/router';
 import styled from '@emotion/styled';
 import { css, Global } from '@emotion/react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { createIntl, createIntlCache, IntlProvider, IntlContext as IntlContext$1, FormattedMessage } from 'react-intl';
+import { createIntl, createIntlCache, IntlContext as IntlContext$1, IntlProvider, FormattedMessage } from 'react-intl';
 import mapboxgl, { Map as Map$1, Marker } from 'mapbox-gl';
 import { createRoot } from 'react-dom/client';
 import { Formik, Form, Field } from 'formik';
@@ -519,15 +519,9 @@ var getPortfolioProjects = /*#__PURE__*/function () {
             if (strapiProject != null && strapiProject.attributes.slug) {
               toReturn.slug = strapiProject.attributes.slug;
             }
-            if (strapiProject != null && strapiProject.attributes.creditsAvailable) {
-              toReturn.creditsAvailable = strapiProject == null ? void 0 : strapiProject.attributes.creditsAvailable;
-            }
             if (strapiProject != null && strapiProject.attributes.thumbnail) {
               toReturn.thumbnail = strapiProject == null ? void 0 : strapiProject.attributes.thumbnail;
             }
-            if (strapiProject != null && strapiProject.attributes.footerSubTitle) {
-              toReturn.footerSubTitle = strapiProject == null ? void 0 : strapiProject.attributes.footerSubTitle;
-            }
             if (strapiProject != null && (_strapiProject$attrib = strapiProject.attributes.portfolio.data) != null && _strapiProject$attrib.attributes.host) {
               toReturn.portfolioHost = strapiProject.attributes.portfolio.data.attributes.host;
             }
@@ -2341,44 +2335,48 @@ var CardContainer = /*#__PURE__*/styled(Box)(_templateObject3$1 || (_templateObj
 var _templateObject$4;
 var GLOBAL_STYLE = /*#__PURE__*/css(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  :root {\n    --default-hero-height: calc(100vh - var(--boemly-space-24));\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])));
 
-var messagesDe$f = {
+var messagesDe$g = {
   'sections.comparison.backgroundShapes': 'Hintergrundformen'
 };
 
-var messagesDe$e = {
+var messagesDe$f = {
   'components.creditsAvailableBadge.text.yes': 'Credits verfügbar',
   'components.creditsAvailableBadge.text.some': 'Einige verbleibende Credits',
   'components.creditsAvailableBadge.text.no': 'Keine verbleibenden Credits',
-  'components.creditsAvailableBadge.text.notYet': 'Gutschriften bald verfügbar'
+  'components.creditsAvailableBadge.text.notYet': 'Credits bald verfügbar'
 };
 
-var messagesDe$d = {
+var messagesDe$e = {
   'sections.cta.backgroundShapes': 'Dunkle Hintergrundformen',
   'sections.cta.backgroundShapesLight': 'Helle Hintergrundformen'
 };
 
-var messagesDe$c = {
+var messagesDe$d = {
   'sections.customerCard.more': 'Weiterlesen'
 };
 
-var messagesDe$b = {
+var messagesDe$c = {
   'sections.customerQuoteCard.more': 'Weiterlesen'
 };
 
-var messagesDe$a = {
+var messagesDe$b = {
   'sections.glossary.copyButtonLabel': 'Kopiere den Link zu diesem Abschnitt in die Zwischenablage',
   'sections.glossary.copySuccessMessage': 'Link in die Zwischenablage kopiert',
   'sections.glossary.copyFailureMessage': 'Link konnte nicht in die Zwischenablage kopiert werden'
 };
 
-var messagesDe$9 = {
+var messagesDe$a = {
   'features.portfolio.documentsDownloadList.projectDocuments': 'Projektdokumente',
   'features.portfolio.documentsDownloadList.downloadDocument': 'Dokument herunterladen'
 };
 
+var messagesDe$9 = {
+  'sections.projectFacts.projectInfo.value': 'Projekt Infos'
+};
+
 var messagesDe$8 = {
-  'sections.projectFacts.projectInfo.value': 'Projekt Infos',
-  'projects.projectFacts.properties.area': 'Fläche'
+  'sections.projectCardGrid.certified': 'Zertifiziert, {year}',
+  'sections.projectCardGrid.certificationInProgres': 'Zertifizierung ist in Arbeit'
 };
 
 var messagesDe$7 = {
@@ -2403,13 +2401,6 @@ var messagesDe$6 = {
 };
 
 var messagesDe$5 = {
-  'components.portfolioProjectCard.text.yes': 'Credits verfügbar',
-  'components.portfolioProjectCard.text.some': 'Einige verbleibende Credits',
-  'components.portfolioProjectCard.text.no': 'Keine verbleibenden Credits',
-  'components.portfolioProjectCard.text.notYet': 'Gutschriften bald verfügbar'
-};
-
-var messagesDe$4 = {
   'portfolio.smallCheckout.price.taxNotIncluded': 'ohne Steuern',
   'portfolio.smallCheckout.price.taxIncluded': 'Preis inklusive Steuern: {number}',
   'portfolio.smallCheckout.contributionValueCurrency.label.CHF': 'Geben Sie den Beitrag in Fr. ein',
@@ -2427,7 +2418,7 @@ var messagesDe$4 = {
   'portfolio.smallCheckout.cta.button': 'Unser Vertriebsteam kontaktieren'
 };
 
-var messagesDe$3 = {
+var messagesDe$4 = {
   'sections.shopCheckout.intro.price': 'Preis',
   'sections.shopCheckout.contributionValue.label.EUR': 'Geben sie einen Betrag in € ein',
   'sections.shopCheckout.contributionValue.label.CHF': 'Geben sie einen Betrag in CHF ein',
@@ -2444,12 +2435,12 @@ var messagesDe$3 = {
   'sections.shopCheckout.submit': 'Kaufen'
 };
 
-var messagesDe$2 = {
+var messagesDe$3 = {
   'sections.textCarousel.moveRight': 'Nach rechts bewegen',
   'sections.textCarousel.moveLeft': 'Nach links bewegen'
 };
 
-var messagesDe$1 = {
+var messagesDe$2 = {
   'sections.timeline.backgroundShapes': 'Hintergrundformen',
   'sections.timeline.showMoreButton': 'Drei weitere Meilensteine anzeigen'
 };
@@ -2459,53 +2450,57 @@ var unitMessagesDe = {
   'unit.formatter.tonsCo2PerYear': '{number} tCO₂/Jahr'
 };
 
-var rootMessagesDe = /*#__PURE__*/_extends({}, messagesDe$e, messagesDe$9, messagesDe$5, messagesDe$6, messagesDe$4, messagesDe$f, messagesDe$d, messagesDe$c, messagesDe$b, messagesDe$a, messagesDe$8, messagesDe$7, messagesDe$3, messagesDe$2, messagesDe$1, unitMessagesDe);
+var rootMessagesDe = /*#__PURE__*/_extends({}, messagesDe$f, messagesDe$a, messagesDe$6, messagesDe$5, messagesDe$g, messagesDe$e, messagesDe$d, messagesDe$c, messagesDe$b, messagesDe$9, messagesDe$8, messagesDe$7, messagesDe$4, messagesDe$3, messagesDe$2, unitMessagesDe);
 
-var messagesEn$d = {
+var messagesEn$c = {
   'sections.comparison.backgroundShapes': 'Background shapes'
 };
 
-var messagesEn$c = {
+var messagesEn$b = {
   'components.creditsAvailableBadge.text.yes': 'Credits available',
   'components.creditsAvailableBadge.text.some': 'Some remaining credits',
   'components.creditsAvailableBadge.text.no': 'No remaining credits',
   'components.creditsAvailableBadge.text.notYet': 'Credits available soon'
 };
 
-var messagesEn$b = {
+var messagesEn$a = {
   'sections.cta.backgroundShapesDark': 'Dark background shapes',
   'sections.cta.backgroundShapesLight': 'Light background shapes'
 };
 
-var messagesEn$a = {
+var messagesEn$9 = {
   'sections.customerCard.more': 'Read more'
 };
 
-var messagesEn$9 = {
+var messagesEn$8 = {
   'sections.customerQuoteCard.more': 'Read more'
 };
 
-var messagesEn$8 = {
+var messagesEn$7 = {
   'sections.glossary.copyButtonLabel': 'Copy a link to this section to your clipboard',
   'sections.glossary.copySuccessMessage': 'Copied the link to your clipboard',
   'sections.glossary.copyFailureMessage': 'Could not copy link to clipboard'
 };
 
-var messagesEn$7 = {
+var messagesEn$6 = {
   'features.portfolio.documentsDownloadList.projectDocuments': 'Project documents',
   'features.portfolio.documentsDownloadList.downloadDocument': 'Download document'
 };
 
-var messagesEn$6 = {
-  'sections.projectFacts.projectInfo.value': 'Project Infos',
-  'projects.projectFacts.properties.area': 'Area'
+var messagesEn$5 = {
+  'sections.projectFacts.projectInfo.value': 'Project Infos'
 };
 
-var messagesEn$5 = {
-  'sections.projectsMap.link.text': 'Show more info'
+var messagesDe$1 = {
+  'sections.projectCardGrid.certified': 'Certified, {year}',
+  'sections.projectCardGrid.certificationInProgres': 'Certification in progress'
 };
 
 var messagesEn$4 = {
+  'sections.projectsMap.link.text': 'Show more info'
+};
+
+var messagesEn$3 = {
   'features.projectInfo.projectInfo.value': 'Project Infos',
   'features.projectInfo.properties.area': 'Project Area',
   'features.projectInfo.properties.location': 'Location',
@@ -2522,13 +2517,6 @@ var messagesEn$4 = {
   'features.projectInfo.properties.year': '{years} {years, plural, one {year} other {years} }'
 };
 
-var messagesEn$3 = {
-  'components.portfolioProjectCard.text.yes': 'Credits available',
-  'components.portfolioProjectCard.text.some': 'Some remaining credits',
-  'components.portfolioProjectCard.text.no': 'No remaining credits',
-  'components.portfolioProjectCard.text.notYet': 'Credits available soon'
-};
-
 var messagesEn$2 = {
   'portfolio.smallCheckout.price.taxNotIncluded': 'not including tax',
   'portfolio.smallCheckout.price.taxIncluded': 'Price including tax: {number}',
@@ -2579,7 +2567,7 @@ var unitMessagesEn = {
   'unit.formatter.tonsCo2PerYear': '{number} tCO₂/year'
 };
 
-var rootMessagesEn = /*#__PURE__*/_extends({}, messagesEn$c, messagesEn$7, messagesEn$3, messagesEn$4, messagesEn$2, messagesEn$d, messagesEn$b, messagesEn$a, messagesEn$9, messagesEn$8, messagesEn$6, messagesEn$5, messagesEn$1, messagesDe, messagesEn, unitMessagesEn);
+var rootMessagesEn = /*#__PURE__*/_extends({}, messagesEn$b, messagesEn$6, messagesEn$3, messagesEn$2, messagesEn$c, messagesEn$a, messagesEn$9, messagesEn$8, messagesEn$7, messagesEn$5, messagesDe$1, messagesEn$4, messagesEn$1, messagesDe, messagesEn, unitMessagesEn);
 
 var messages = {
   en: rootMessagesEn,
@@ -2875,15 +2863,6 @@ var TextWithTextCards = function TextWithTextCards(_ref) {
   }))));
 };
 
-var CreditsAvailableState;
-(function (CreditsAvailableState) {
-  CreditsAvailableState["YES"] = "yes";
-  CreditsAvailableState["SOME"] = "some";
-  CreditsAvailableState["NO"] = "no";
-  CreditsAvailableState["NOT_YET"] = "notYet";
-})(CreditsAvailableState || (CreditsAvailableState = {}));
-var CreditsAvailableState$1 = CreditsAvailableState;
-
 var FORMAT_AS_HECTARE_CONFIG = {
   unit: 'hectare',
   unitDisplay: 'short',
@@ -2895,41 +2874,105 @@ var FORMAT_AS_PERCENT_CONFIG = {
   maximumFractionDigits: 2
 };
 
-var PortfolioProjectCard = function PortfolioProjectCard(_ref) {
-  var _creditsAvailableMess, _project$creditsAvail, _project$thumbnail, _project$thumbnail2, _project$thumbnail3;
-  var project = _ref.project;
+var CreditAvailability;
+(function (CreditAvailability) {
+  CreditAvailability["CREDITS_AVAILABLE"] = "credits_available";
+  CreditAvailability["NO_CREDITS_AVAILABLE"] = "no_credits_available";
+  CreditAvailability["SOME_CREDITS_AVAILABLE"] = "some_credits_available";
+  CreditAvailability["SOON_CREDITS_AVAILABLE"] = "soon_credits_available";
+})(CreditAvailability || (CreditAvailability = {}));
+
+var CreditsAvailableBadge = function CreditsAvailableBadge(_ref) {
+  var _variants;
+  var status = _ref.status,
+    href = _ref.href;
   var _useContext = useContext(IntlContext),
-    formatMessage = _useContext.formatMessage,
-    formatNumber = _useContext.formatNumber;
-  var creditsAvailableMessages = (_creditsAvailableMess = {}, _creditsAvailableMess[CreditsAvailableState$1.YES] = formatMessage({
-    id: 'components.portfolioProjectCard.text.yes'
-  }), _creditsAvailableMess[CreditsAvailableState$1.SOME] = formatMessage({
-    id: 'components.portfolioProjectCard.text.some'
-  }), _creditsAvailableMess[CreditsAvailableState$1.NO] = formatMessage({
-    id: 'components.portfolioProjectCard.text.no'
-  }), _creditsAvailableMess[CreditsAvailableState$1.NOT_YET] = formatMessage({
-    id: 'components.portfolioProjectCard.text.notYet'
-  }), _creditsAvailableMess);
-  return React.createElement(ProjectCard, {
-    title: project.title,
-    facts: [{
-      id: 1,
-      text: formatNumber((project.area || 0) / 10000, FORMAT_AS_HECTARE_CONFIG)
-    }, {
-      id: 2,
-      text: project.location || ''
-    }],
-    footerTitle: creditsAvailableMessages[(_project$creditsAvail = project.creditsAvailable) != null ? _project$creditsAvail : CreditsAvailableState$1.NOT_YET],
-    footerSubTitle: project.footerSubTitle || '',
-    image: project.thumbnail && React.createElement(Image, {
-      src: strapiMediaUrl((_project$thumbnail = project.thumbnail) == null ? void 0 : _project$thumbnail.img, 'medium'),
-      alt: (_project$thumbnail2 = project.thumbnail) == null ? void 0 : _project$thumbnail2.alt,
-      fill: true,
-      style: {
-        objectFit: ((_project$thumbnail3 = project.thumbnail) == null ? void 0 : _project$thumbnail3.objectFit) || 'cover'
-      }
-    })
-  });
+    formatMessage = _useContext.formatMessage;
+  var variants = (_variants = {}, _variants[CreditAvailability.CREDITS_AVAILABLE] = {
+    message: formatMessage({
+      id: 'components.creditsAvailableBadge.text.yes'
+    }),
+    color: 'var(--boemly-colors-primary-800)'
+  }, _variants[CreditAvailability.NO_CREDITS_AVAILABLE] = {
+    message: formatMessage({
+      id: 'components.creditsAvailableBadge.text.no'
+    }),
+    color: 'var(--boemly-colors-red-600)'
+  }, _variants[CreditAvailability.SOME_CREDITS_AVAILABLE] = {
+    message: formatMessage({
+      id: 'components.creditsAvailableBadge.text.some'
+    }),
+    color: 'var(--boemly-colors-orange-500)'
+  }, _variants[CreditAvailability.SOON_CREDITS_AVAILABLE] = {
+    message: formatMessage({
+      id: 'components.creditsAvailableBadge.text.notYet'
+    }),
+    color: 'var(--boemly-colors-blue-500)'
+  }, _variants);
+  var variant = variants[status];
+  return React.createElement(Flex, {
+    justifyContent: "flex-start",
+    as: href ? Link : undefined,
+    href: href
+  }, React.createElement(Tag, {
+    backgroundColor: variant.color,
+    mt: "2",
+    mb: "1"
+  }, React.createElement(Text, {
+    color: "white",
+    size: "xsLowBold"
+  }, variant.message)));
+};
+
+var ProjectGridCard = function ProjectGridCard(_ref) {
+  var _project$thumbnail, _project$thumbnail2, _project$thumbnail3;
+  var project = _ref.project;
+  var _useContext = useContext(IntlContext$1),
+    formatNumber = _useContext.formatNumber,
+    formatMessage = _useContext.formatMessage;
+  return React.createElement(Container, null, React.createElement(Flex, {
+    flexDir: "column",
+    height: "full"
+  }, project.thumbnail && React.createElement(Box, {
+    borderRadius: "xl",
+    position: "relative",
+    height: "36",
+    mb: "2"
+  }, React.createElement(Image, {
+    src: strapiMediaUrl((_project$thumbnail = project.thumbnail) == null ? void 0 : _project$thumbnail.img, 'medium'),
+    alt: (_project$thumbnail2 = project.thumbnail) == null ? void 0 : _project$thumbnail2.alt,
+    fill: true,
+    style: {
+      objectFit: ((_project$thumbnail3 = project.thumbnail) == null ? void 0 : _project$thumbnail3.objectFit) || 'cover',
+      borderRadius: 'var(--boemly-radii-xl)'
+    }
+  })), React.createElement(Heading, {
+    my: "4",
+    size: "lg"
+  }, project.title), React.createElement(Flex, {
+    flexDir: "row",
+    gap: "2"
+  }, React.createElement(Tag, null, React.createElement(Text, {
+    size: "xsLowBold",
+    color: "gray.800"
+  }, formatNumber((project.area || 0) / 10000, FORMAT_AS_HECTARE_CONFIG))), React.createElement(Tag, null, React.createElement(Text, {
+    size: "xsLowBold",
+    color: "gray.800"
+  }, project.location)), project.certificationDate ? React.createElement(Tag, null, React.createElement(Text, {
+    size: "xsLowBold",
+    color: "gray.800"
+  }, formatMessage({
+    id: 'sections.projectCardGrid.certified'
+  }, {
+    year: project.certificationDate.getFullYear()
+  }))) : React.createElement(Tag, null, React.createElement(Text, {
+    size: "xsLowBold",
+    color: "gray.800"
+  }, formatMessage({
+    id: 'sections.projectCardGrid.certificationInProgres'
+  })))), React.createElement(CreditsAvailableBadge, {
+    status: project.creditAvailability
+  })));
 };
 
 var TextWithCard = function TextWithCard(_ref) {
@@ -2944,7 +2987,7 @@ var TextWithCard = function TextWithCard(_ref) {
     rowSpan: 1,
     position: "relative",
     "data-testid": "card-position-" + slice.cardPosition
-  }, portfolioProject && React.createElement(PortfolioProjectCard, {
+  }, portfolioProject && React.createElement(ProjectGridCard, {
     project: portfolioProject
   }), !portfolioProject && slice.card && React.createElement(ProjectCard, {
     facts: slice.card.facts,
@@ -3238,7 +3281,7 @@ var ProjectsGrid = function ProjectsGrid(_ref2) {
       _hover: {
         boxShadow: 'lg'
       }
-    }, React.createElement(PortfolioProjectCard, {
+    }, React.createElement(ProjectGridCard, {
       project: project
     })));
   }))));
@@ -3292,47 +3335,11 @@ var MinimalProviders = function MinimalProviders(_ref) {
   }, children));
 };
 
-var CreditsAvailableBadge = function CreditsAvailableBadge(_ref) {
-  var _variants;
-  var status = _ref.status,
-    href = _ref.href;
-  var _useContext = useContext(IntlContext),
-    formatMessage = _useContext.formatMessage;
-  var variants = (_variants = {}, _variants[CreditsAvailableState$1.YES] = {
-    color: 'green',
-    text: formatMessage({
-      id: 'components.creditsAvailableBadge.text.yes'
-    })
-  }, _variants[CreditsAvailableState$1.SOME] = {
-    color: 'orange',
-    text: formatMessage({
-      id: 'components.creditsAvailableBadge.text.some'
-    })
-  }, _variants[CreditsAvailableState$1.NO] = {
-    color: 'red',
-    text: formatMessage({
-      id: 'components.creditsAvailableBadge.text.no'
-    })
-  }, _variants[CreditsAvailableState$1.NOT_YET] = {
-    color: 'blue',
-    text: formatMessage({
-      id: 'components.creditsAvailableBadge.text.notYet'
-    })
-  }, _variants);
-  var variant = variants[status];
-  return React.createElement(Badge, {
-    as: href ? Link : undefined,
-    href: href,
-    colorScheme: variant.color,
-    width: "fit-content"
-  }, variant.text);
-};
-
 var MapMarker = function MapMarker(_ref) {
   var title = _ref.title,
     projectDeveloper = _ref.projectDeveloper,
     slug = _ref.slug,
-    creditsAvailable = _ref.creditsAvailable,
+    creditAvailability = _ref.creditAvailability,
     _ref$portfolioHost = _ref.portfolioHost,
     portfolioHost = _ref$portfolioHost === void 0 ? '' : _ref$portfolioHost,
     _ref$isPublic = _ref.isPublic,
@@ -3366,12 +3373,12 @@ var MapMarker = function MapMarker(_ref) {
     maxWidth: ['3xs', null, null, 'sm']
   }, React.createElement(Flex, {
     direction: "column"
-  }, creditsAvailable && React.createElement(React.Fragment, null, React.createElement(CreditsAvailableBadge, {
-    status: creditsAvailable,
+  }, React.createElement(CreditsAvailableBadge, {
+    status: creditAvailability,
     href: slug && portfolioHost + "/portfolio/" + slug
-  }), React.createElement(Box, {
+  }), React.createElement(Spacer, {
     height: "3"
-  })), React.createElement(Heading, {
+  }), React.createElement(Heading, {
     size: "md"
   }, title), projectDeveloper && React.createElement(Text, {
     size: "smLowNormal",
@@ -3435,7 +3442,7 @@ var ProjectsMap = function ProjectsMap(_ref) {
         isPublic: project.isPublic,
         portfolioHost: project.portfolioHost,
         slug: project.slug,
-        creditsAvailable: project.creditsAvailable,
+        creditAvailability: project.creditAvailability,
         projectDeveloper: (_project$projectDevel = project.projectDeveloper) == null ? void 0 : _project$projectDevel.name
       })));
       // Offset is needed to center the marker on the coordinates
@@ -4904,11 +4911,11 @@ var ProjectInfo = function ProjectInfo(_ref) {
     }),
     text: formatNumber(project.riskBuffer / 100, FORMAT_AS_PERCENT_CONFIG),
     caption: subtitles.riskBufferSubtitle
-  })))) : React.createElement(React.Fragment, null), project.creditsAvailable ? React.createElement(Box, {
+  })))) : React.createElement(React.Fragment, null), React.createElement(Box, {
     mt: "2"
   }, React.createElement(CreditsAvailableBadge, {
-    status: project.creditsAvailable
-  })) : React.createElement(React.Fragment, null));
+    status: project.creditAvailability
+  })));
 };
 
 var DocumentsDownloadList = function DocumentsDownloadList(_ref) {