@treely/strapi-slices 5.5.0 → 5.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treely/strapi-slices",
-  "version": "5.5.0",
+  "version": "5.5.2",
   "license": "MIT",
   "author": "Tree.ly GmbH",
   "description": "@treely/strapi-slices is a open source library maintained by Tree.ly.",
@@ -110,8 +110,13 @@
     "@types/mapbox-gl": "^2.7.19",
     "@types/react": "^18.2.38",
     "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^7.9.0",
+    "@typescript-eslint/parser": "^7.9.0",
     "dts-cli": "^2.0.3",
     "esbuild": "^0.19.8",
+    "eslint-config-airbnb-typescript": "^18.0.0",
+    "eslint-config-next": "^14.2.3",
+    "eslint-config-prettier": "^9.1.0",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",

package/src/components/portfolio/SmallCheckout/SmallCheckout.tsx

@@ -56,7 +56,7 @@ const SmallCheckout = ({
   button,
 }: SmallCheckoutProps) => {
   const { formatNumber, formatMessage, locale } = useContext(IntlContext);
-  const { asPath, push } = useRouter();
+  const { push } = useRouter();
 
   const validateForm = useCallback(
     (values: SmallCheckoutForm) => {
@@ -86,18 +86,19 @@ const SmallCheckout = ({
   );
 
   const onSubmit = async ({ contributionValueCurrency }: SmallCheckoutForm) => {
-    const url = new URL(`${FPM_API_URI}/v1/webhooks/shop/checkout`);
+    const checkoutURL = new URL(`${FPM_API_URI}/v1/webhooks/shop/checkout`);
+    const currentURL = new URL(window.location.href);
 
-    url.searchParams.append('batchId', batchId);
+    checkoutURL.searchParams.append('batchId', batchId);
 
-    url.searchParams.append(
+    checkoutURL.searchParams.append(
       'quantity',
       Math.floor(contributionValueCurrency / pricePerKg).toString()
     );
 
-    url.searchParams.append('cancelPath', asPath);
+    checkoutURL.searchParams.append('cancelPath', currentURL.pathname);
 
-    push(url.toString());
+    push(checkoutURL.toString());
   };
 
   return (
@@ -154,12 +155,10 @@ const SmallCheckout = ({
                         type: 'number',
                         value: field.value,
                         onChange: (e) => {
-                          // valueAsNumber might be NaN
-                          const value = e.target.valueAsNumber || 0;
-
                           setValues({
-                            contributionValueCurrency: value,
-                            contributionValueKgs: value / pricePerKg / 1000,
+                            contributionValueCurrency: e.target.valueAsNumber,
+                            contributionValueKgs:
+                              e.target.valueAsNumber / pricePerKg / 1000,
                           });
                         },
                       }}

package/src/slices/BlogCards/BlogCards.stories.tsx

@@ -7,6 +7,7 @@ import {
 import StrapiBlogPost from '../../models/strapi/StrapiBlogPost';
 import IStrapiData from '../../models/strapi/IStrapiData';
 import BlogCards from '.';
+import { IStrapi, StrapiCategory } from '../..';
 
 export default {
   title: 'slices/BlogCards',
@@ -14,6 +15,17 @@ export default {
 } as Meta<typeof BlogCards>;
 
 const Template: StoryFn<typeof BlogCards> = (args) => <BlogCards {...args} />;
+const blogPostCategory: IStrapi<IStrapiData<StrapiCategory>> = {
+  data: {
+    id: 1,
+    attributes: {
+      name: 'Business',
+      locale: 'en',
+      createdAt: '2022-01-10T14:59:44.830Z',
+      updatedAt: '2022-01-10T14:59:44.839Z',
+    },
+  },
+};
 const blogPost: IStrapiData<StrapiBlogPost> = {
   id: 1,
   attributes: {
@@ -40,17 +52,7 @@ const blogPost: IStrapiData<StrapiBlogPost> = {
         },
       },
     },
-    category: {
-      data: {
-        id: 1,
-        attributes: {
-          name: 'Business',
-          locale: 'en',
-          createdAt: '2022-01-10T14:59:44.830Z',
-          updatedAt: '2022-01-10T14:59:44.839Z',
-        },
-      },
-    },
+    category: blogPostCategory,
     locale: 'en',
     createdAt: '2022-01-10T15:04:32.897Z',
     updatedAt: '2022-01-11T10:21:42.317Z',
@@ -85,6 +87,7 @@ White.args = {
     title: 'Title',
     subTitle: 'Sub title',
     variant: 'white',
+    blogPostCategory,
   },
   blogPosts: [
     blogPost,
@@ -108,6 +111,7 @@ Gray.args = {
     title: 'Title',
     subTitle: 'Sub title',
     variant: 'gray',
+    blogPostCategory,
   },
   blogPosts: [
     blogPost,
@@ -131,6 +135,7 @@ WithButton.args = {
     title: 'Title',
     subTitle: 'Sub title',
     variant: 'white',
+    blogPostCategory,
     button: { id: 1, url: 'url', text: 'Button' },
   },
   blogPosts: [

package/src/slices/ImageTextSequence/ImageTextSequence.stories.tsx

@@ -3,6 +3,7 @@ import { StoryFn, Meta } from '@storybook/react';
 
 import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
 import ImageTextSequence from '.';
+import { StrapiImage, StrapiLink } from '../..';
 
 export default {
   title: 'slices/ImageTextSequence',
@@ -13,7 +14,13 @@ const Template: StoryFn<typeof ImageTextSequence> = (args) => (
   <ImageTextSequence {...args} />
 );
 
-const imageTextRows = [
+const imageTextRows: {
+  id: number;
+  title: string;
+  text: string;
+  button?: StrapiLink;
+  image: StrapiImage;
+}[] = [
   {
     id: 1,
     title: 'Row title 1',

package/src/slices/ProjectsMap/ProjectsMap.stories.tsx

@@ -24,7 +24,7 @@ Minimal.args = {
       ...fpmProjectMock,
       geom: {
         type: 'Point',
-        coordinates: [10.336542145100883, 47.82636837845707],
+        coordinates: [10.33654214510088, 47.82636837845707],
       },
     },
   ],
@@ -45,7 +45,7 @@ WithHero.args = {
       ...fpmProjectMock,
       geom: {
         type: 'Point',
-        coordinates: [10.336542145100883, 47.82636837845707],
+        coordinates: [10.33654214510088, 47.82636837845707],
       },
     },
   ],
@@ -67,7 +67,7 @@ InitialPosition.args = {
       isPublic: true,
       geom: {
         type: 'Point',
-        coordinates: [10.336542145100883, 47.82636837845707],
+        coordinates: [10.33654214510088, 47.82636837845707],
       },
     },
   ],
@@ -82,7 +82,7 @@ FullProps.args = {
 
     defaultCenterCoordinates: {
       latitude: 47.82636837845707,
-      longitude: 10.336542145100883,
+      longitude: 10.33654214510088,
     },
     defaultZoomLevel: 10,
   },
@@ -95,7 +95,7 @@ FullProps.args = {
       isPublic: true,
       geom: {
         type: 'Point',
-        coordinates: [10.336542145100883, 47.82636837845707],
+        coordinates: [10.33654214510088, 47.82636837845707],
       },
     },
   ],

package/src/slices/ShopCheckout/ShopCheckout.tsx

@@ -45,7 +45,7 @@ export interface ShopCheckoutProps {
 export const ShopCheckout = ({ slice }: ShopCheckoutProps): JSX.Element => {
   const [primary50] = useToken('colors', ['primary.50']);
   const { formatMessage, formatNumber, locale } = useContext(IntlContext);
-  const { asPath, push } = useRouter();
+  const { push } = useRouter();
 
   const validateForm = useCallback(
     (values: CheckoutForm) => {
@@ -75,20 +75,22 @@ export const ShopCheckout = ({ slice }: ShopCheckoutProps): JSX.Element => {
   );
 
   const onSubmit = ({ contributionValue }: CheckoutForm) => {
-    const url = new URL(`${FPM_API_URI}/v1/webhooks/shop/checkout`);
+    const checkoutURL = new URL(`${FPM_API_URI}/v1/webhooks/shop/checkout`);
+    const currentURL = new URL(window.location.href);
 
-    url.searchParams.append('batchId', slice.batchId);
+    checkoutURL.searchParams.append('batchId', slice.batchId);
 
-    url.searchParams.append(
+    checkoutURL.searchParams.append(
       'quantity',
       Math.floor(contributionValue / slice.pricePerKg).toString()
     );
 
-    url.searchParams.append('cancelPath', asPath);
+    checkoutURL.searchParams.append('cancelPath', currentURL.pathname);
 
-    if (slice.couponId) url.searchParams.append('couponId', slice.couponId);
+    if (slice.couponId)
+      checkoutURL.searchParams.append('couponId', slice.couponId);
 
-    push(url.toString());
+    push(checkoutURL.toString());
   };
 
   return (

package/src/slices/Steps/Steps.tsx

@@ -175,6 +175,7 @@ export const Steps: React.FC<StepsProps> = ({ slice }: StepsProps) => {
                   slice.card.shapes &&
                   slice.card.shapes?.map((shape) => (
                     <Image
+                      key={shape.id}
                       src={strapiMediaUrl(shape.img, 'small')}
                       alt={shape.alt}
                       fill

package/src/slices/TextWithCard/TextWithCard.stories.tsx

@@ -4,6 +4,7 @@ import { StoryFn, Meta } from '@storybook/react';
 import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
 import TextWithCard from '.';
 import CreditsAvailableState from '../../models/CreditsAvailableState';
+import { IStrapiData, PortfolioProject, StrapiProject } from '../..';
 
 export default {
   title: 'slices/TextWithCard',
@@ -37,7 +38,7 @@ const card = {
   footerTitle: 'Footer title',
   footerSubTitle: 'Footer sub title',
 };
-const portfolioProject = {
+const portfolioProject: PortfolioProject = {
   id: '1',
   title: 'Project 1',
   geom: {
@@ -77,7 +78,7 @@ const portfolioProject = {
     id: 1,
   },
 };
-const project = {
+const project: IStrapiData<StrapiProject> = {
   id: 1,
   attributes: {
     slug: 'slug',

package/src/slices/Timeline/Timeline.stories.tsx

@@ -7,6 +7,7 @@ import {
 } from '../../test/storybookMocks/storybookStrapiMedia';
 import Timeline from '.';
 import { TimelineItem } from './Timeline';
+import { StrapiImage } from '../..';
 
 export default {
   title: 'slices/Timeline',
@@ -27,14 +28,17 @@ const button = {
   text: 'Button',
   url: 'https://tree.ly',
 };
-const badge = { text: 'Badge', variant: 'green' };
+const badge: { text: string; variant: 'orange' | 'green' | 'red' | 'gray' } = {
+  text: 'Badge',
+  variant: 'green',
+};
 const image = { id: 71, alt: 'Alt', img: { data: storybookStrapiCoverMock } };
 const icon = {
   id: 1,
   alt: 'Icon alt text',
   img: { data: storybookStrapiTreeIconMock },
 };
-const logo = {
+const logo: StrapiImage = {
   id: 2,
   alt: 'Avatar image alt text',
   img: { data: storybookStrapiAvatarMock },