@treely/strapi-slices 7.15.1 → 7.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treely/strapi-slices",
-  "version": "7.15.1",
+  "version": "7.16.0",
   "license": "MIT",
   "author": "Tree.ly FlexCo",
   "description": "@treely/strapi-slices is a open source library maintained by Tree.ly.",

package/src/components/SliceRenderer/SliceRenderer.tsx

@@ -42,6 +42,7 @@ import Locale from '../../models/Locale';
 import { ContextProvider } from '../ContextProvider';
 import Timeline from '../../slices/Timeline';
 import Events from '../../slices/Events';
+import Redirect from '../../slices/Redirect';
 import { AnalyticsFunction } from '../ContextProvider/ContextProvider';
 
 export interface CustomSliceProps {
@@ -316,6 +317,10 @@ export const SliceRenderer = ({
           return (
             <Events key={`${slice.__component}-${slice.id}`} slice={slice} />
           );
+        case 'sections.redirect':
+          return (
+            <Redirect key={`${slice.__component}-${slice.id}`} slice={slice} />
+          );
         default:
           if (CustomSlice) {
             return (

package/src/components/portfolio/ProjectInfo/ProjectInfo.tsx

@@ -43,7 +43,6 @@ export const ProjectInfo: React.FC<ProjectInfoProps> = ({
   subtitles,
 }: ProjectInfoProps) => {
   const { formatMessage, formatNumber, formatDate } = useContext(IntlContext);
-
   return (
     <Container p="2" width="full">
       <Heading size="xl" textAlign="left">
@@ -208,36 +207,39 @@ export const ProjectInfo: React.FC<ProjectInfoProps> = ({
         <></>
       )}
       <SimpleGrid columns={[1, null, null, 2]} spacingX="10" spacingY="8">
-        {project.averageSellableAmountPerYear &&
-          project.averageSellableAmountPerYear > 0 && (
-            <Tooltip
-              label={formatMessage({
-                id: 'features.projectInfo.properties.projectVolume.toolTip',
-              })}
-            >
-              <Box>
-                <LabelTextPair
-                  label={formatMessage({
-                    id: 'features.projectInfo.properties.projectVolume.label',
-                  })}
-                  text={formatMessage(
-                    {
-                      id: 'unit.formatter.tonsCo2PerYear',
-                    },
-                    {
-                      number: formatNumber(
-                        convertCo2AmountKgToTons(
-                          project.averageSellableAmountPerYear.toString()
-                        ),
-                        { maximumFractionDigits: 0 }
+        {project.averageSellableAmountPerYear > 0 ? (
+          <Tooltip
+            label={formatMessage({
+              id: 'features.projectInfo.properties.projectVolume.toolTip',
+            })}
+          >
+            <Box>
+              <LabelTextPair
+                label={formatMessage({
+                  id: 'features.projectInfo.properties.projectVolume.label',
+                })}
+                text={formatMessage(
+                  {
+                    id: 'unit.formatter.tonsCo2PerYear',
+                  },
+                  {
+                    number: formatNumber(
+                      convertCo2AmountKgToTons(
+                        project.averageSellableAmountPerYear.toString()
                       ),
-                    }
-                  )}
-                  caption={subtitles.averageSellableAmountPerYearSubtitle}
-                />
-              </Box>
-            </Tooltip>
-          )}
+                      { maximumFractionDigits: 0 }
+                    ),
+                  }
+                )}
+                caption={subtitles.averageSellableAmountPerYearSubtitle}
+              />
+            </Box>
+          </Tooltip>
+        ) : (
+          <Box>
+            <CreditsAvailableBadge status={project.creditAvailability} />
+          </Box>
+        )}
 
         {project.riskBuffer && (
           <Box>
@@ -255,9 +257,13 @@ export const ProjectInfo: React.FC<ProjectInfoProps> = ({
         )}
       </SimpleGrid>
 
-      <Box mt="2">
-        <CreditsAvailableBadge status={project.creditAvailability} />
-      </Box>
+      {project.averageSellableAmountPerYear > 0 ? (
+        <Box mt="2">
+          <CreditsAvailableBadge status={project.creditAvailability} />
+        </Box>
+      ) : (
+        <></>
+      )}
     </Container>
   );
 };

package/src/slices/Redirect/Rediect.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render } from '../../test/testUtils';
+import { mergeDeep } from '../../utils/mergeDeep';
+import { redirectSpy } from '../../../__mocks__/next/navigation';
+import Redirect from '.';
+import { RedirectProps } from './Redirect';
+import { RedirectType } from 'next/navigation';
+
+const defaultProps: RedirectProps = {
+  slice: {
+    url: 'https://redirect.com',
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = mergeDeep(defaultProps, props);
+  render(<Redirect {...combinedProps} />);
+};
+
+describe('The Redirect component', () => {
+  afterEach(() => {
+    redirectSpy.mockRestore();
+  });
+
+  it('calls the redirect URL when rendering', () => {
+    setup();
+
+    expect(redirectSpy).toHaveBeenCalledWith(
+      'https://redirect.com',
+      RedirectType.replace
+    );
+  });
+});

package/src/slices/Redirect/Redirect.tsx

@@ -0,0 +1,17 @@
+import React, { useEffect } from 'react';
+import { RedirectType, redirect } from 'next/navigation';
+
+export interface RedirectProps {
+  slice: {
+    url: string;
+  };
+}
+
+export const Redirect = ({ slice }: RedirectProps): JSX.Element => {
+  useEffect(() => {
+    // When using `replace`, the current browser history entry will be replaced
+    redirect(slice.url, RedirectType.replace);
+  }, [slice.url]);
+
+  return <></>;
+};

package/src/slices/Redirect/index.ts

@@ -0,0 +1,3 @@
+import { Redirect } from './Redirect';
+
+export default Redirect;