{"version":3,"file":"GetStarted-CtHmYEgE.js","sources":["../../src/components/Discover/DiscoverCarousel.tsx","../../src/components/GetStarted.tsx"],"sourcesContent":["import { Carousel } from '@mantine/carousel'\nimport { Box, Stack, Title, useMantineTheme } from '@mantine/core'\nimport { useMediaQuery } from '@mantine/hooks'\nimport { IconCaretLeftFilled, IconCaretRightFilled } from '@tabler/icons-react'\nimport React, { useEffect, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\n\nimport { useConstants, useErrorMessages } from '../../constants/content'\nimport useSessionStorage from '../../hooks/useSessionStorage'\nimport {\n  DISCOVER_CAROUSEL_CONTENT_TYPE,\n  Entry,\n  getParagraph,\n  RichText,\n} from '../../plugins/contentful/api'\nimport client from '../../plugins/contentful/client'\nimport ErrorMessage from '../ErrorMessage'\nimport Loading from '../Loading'\nimport GalleryCard, { GalleryElement } from './GalleryCard'\nimport SpacesCards from './SpacesCards'\n\n/* -------------------------------------------------------------------------- */\n/*                     Export Functions for Gallery Cards                     */\n/* -------------------------------------------------------------------------- */\nexport type GalleryElementsImagesByEntryId = {\n  // undefined means that the image is not loaded yet\n  // true means that the image is loading\n  // false means that the failed to be loaded\n  // string means that the image is loaded and this is its URL\n  [entryId: string]: undefined | string | boolean\n}\n\nexport const wrapData = (\n  elem: Entry,\n  imagesByEntryId: GalleryElementsImagesByEntryId\n): GalleryElement => {\n  const { title, buttonLink, signedOut, signedIn } = elem.fields\n  const paragraph =\n    elem.fields.description === undefined ? '' : getParagraph(elem.fields.description)\n  const description =\n    elem.fields.description === undefined ? '' : (elem.fields.description as RichText)\n\n  const imageAsset = imagesByEntryId[elem.sys.id]\n\n  return {\n    id: elem.sys.id,\n    title,\n    paragraph,\n    description,\n    image: typeof imageAsset === 'string' ? imageAsset : undefined,\n    buttonLink,\n    buttonText: elem.fields.buttonText === undefined ? '' : elem.fields?.buttonText || undefined,\n    signedOut: signedOut === undefined ? false : signedOut,\n    signedIn: signedIn === undefined ? true : signedIn,\n  }\n}\n\nexport const pullGalleryImage = (\n  content: Entry[],\n  oldEntry: GalleryElementsImagesByEntryId,\n  setState: React.Dispatch<React.SetStateAction<GalleryElementsImagesByEntryId>>\n) => {\n  async function getAssetsByIds(\n    entryIdAssetIdPairs: [entryId: string, assetId: string][],\n    saveAsset: (entryId: string, urlOrError: string | Error) => void\n  ): Promise<void> {\n    for (let i = 0; i < entryIdAssetIdPairs.length; i++) {\n      const [entryId, assetId] = entryIdAssetIdPairs[i]\n      try {\n        // eslint-disable-next-line no-await-in-loop\n        const asset = await client.getAsset(assetId)\n        const url = asset?.fields?.file?.url\n        if (!url) {\n          console.warn(`Asset ${assetId} has no url`)\n        } else {\n          saveAsset(entryId, url)\n        }\n      } catch (e) {\n        console.error('ASSET error:', e)\n        saveAsset(entryId, new Error(`${e}`))\n      }\n    }\n  }\n\n  const newGalleryImageByEntry: GalleryElementsImagesByEntryId = { ...oldEntry }\n\n  content.forEach(elem => {\n    const entryId = elem.sys.id\n    newGalleryImageByEntry[entryId] =\n      newGalleryImageByEntry[entryId] ?? elem.fields?.image?.fields?.file?.url\n  })\n\n  const entryIdsAssetIdsPairsToRequest = Object.keys(newGalleryImageByEntry)\n    // filter only by undefined, which means the entry's image is still not loaded nor loading\n    .filter(entryId => newGalleryImageByEntry[entryId] === undefined)\n    .map(entryId => {\n      const entry = content.find(elem => elem.sys.id === entryId)\n      const assetId = entry?.fields?.image?.sys?.id\n      return [entryId, assetId] as [string, string | undefined]\n    })\n    // filter out undefined, which means the entry has no image or the entry is not found\n    .filter((tuple): tuple is [string, string] => !!tuple[0] && !!tuple[1])\n\n  entryIdsAssetIdsPairsToRequest.forEach(([entryId]) => {\n    newGalleryImageByEntry[entryId] = true\n  })\n\n  getAssetsByIds(entryIdsAssetIdsPairsToRequest, (entryId, url) => {\n    setState(prevGalleryImageByEntry => ({\n      ...prevGalleryImageByEntry,\n      [entryId]: url instanceof Error ? false : url,\n    }))\n  }).catch(console.error)\n\n  return newGalleryImageByEntry\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                      -                                     */\n/* -------------------------------------------------------------------------- */\n\nconst DiscoverCarousel: React.FC = () => {\n  const {\n    t,\n    i18n: { language },\n  } = useTranslation()\n  const constants = useConstants()\n  const errorMessages = useErrorMessages()\n  const [discoverContent, setDiscoverContent] = useSessionStorage<Entry[]>(\n    `discoverContent-${language}`,\n    []\n  )\n  const [isLoading, setIsLoading] = useState<boolean>(false)\n  const [error, setError] = useState<string>('')\n  const theme = useMantineTheme()\n  const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`)\n\n  useEffect(() => {\n    if (!discoverContent.length) {\n      setIsLoading(true)\n      client\n        .getEntries({ content_type: DISCOVER_CAROUSEL_CONTENT_TYPE, locale: language })\n        .then((response: any) => {\n          const sortedContent = response.items.sort(\n            (a: Entry, b: Entry) => a.fields.order - b.fields.order\n          )\n          setDiscoverContent(sortedContent)\n        })\n        .catch((err: any) => {\n          setError(err.message)\n          setIsLoading(false)\n        })\n        .finally(() => {\n          setIsLoading(false)\n        })\n    }\n  }, [discoverContent, setDiscoverContent, t, language])\n\n  const [galleryImageByEntry, setGalleryImageByEntry] = useState<GalleryElementsImagesByEntryId>({})\n\n  useEffect(() => {\n    setGalleryImageByEntry(oldGalleryImageByEntry =>\n      pullGalleryImage(discoverContent, oldGalleryImageByEntry, setGalleryImageByEntry)\n    )\n  }, [discoverContent])\n\n  return (\n    <Stack style={{ gap: 'lg', marginTop: '32px', marginBottom: '100px' }}>\n      <Title order={isMobile ? 3 : 2} style={{ textAlign: 'left' }}>\n        {constants.DISCOVER_HEADER}\n      </Title>\n      {isLoading && <Loading />}\n      {error && <ErrorMessage message={errorMessages.cmsConnection} details={error} />}\n      {!isLoading && !error && (\n        <Stack\n          style={{\n            flexDirection: 'column',\n            justifyContent: 'center',\n            alignItems: 'center',\n            width: '100%',\n          }}\n        >\n          <Carousel\n            slideSize={`${100 / (discoverContent.length - 1)}%`}\n            previousControlIcon={<IconCaretLeftFilled />}\n            nextControlIcon={<IconCaretRightFilled />}\n            slidesToScroll=\"auto\"\n          >\n            <SpacesCards />\n            {discoverContent.slice(0, -2).map((elem, index) => (\n              <Carousel.Slide key={`${elem}${String(index)}`}>\n                <Box style={{ display: 'flex', justifyContent: 'center' }}>\n                  <GalleryCard elem={wrapData(elem, galleryImageByEntry)} />\n                </Box>\n              </Carousel.Slide>\n            ))}\n          </Carousel>\n        </Stack>\n      )}\n    </Stack>\n  )\n}\n\nexport default DiscoverCarousel\n","import { Carousel } from '@mantine/carousel'\nimport { Stack, Text, Title, useMantineTheme } from '@mantine/core'\nimport { useMediaQuery } from '@mantine/hooks'\nimport { IconCaretLeftFilled, IconCaretRightFilled } from '@tabler/icons-react'\nimport React, { useEffect, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useNavigate } from 'react-router-dom'\n\nimport missingImage from '@/assets/webp_converted/imageOnload.webp'\nimport { useErrorMessages } from '@/constants/content'\nimport useSessionStorage from '@/hooks/useSessionStorage'\nimport { Entry, GET_STARTED_CONTENT_TYPE } from '@/plugins/contentful/api'\nimport client from '@/plugins/contentful/client'\n\nimport RootButton from './Buttons/RootButton'\nimport {\n  GalleryElementsImagesByEntryId,\n  pullGalleryImage,\n  wrapData,\n} from './Discover/DiscoverCarousel'\nimport ErrorMessage from './ErrorMessage'\nimport Loading from './Loading'\n\ninterface CTACardProps {\n  image: string | undefined\n  title: string\n  description?: string\n  button: {\n    text?: string\n    link: string\n  }\n}\n\nexport const CTACard: React.FC<CTACardProps> = ({ image, title, description = '', button }) => {\n  const theme = useMantineTheme()\n  const navigate = useNavigate()\n  const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`)\n  return (\n    <Stack\n      style={{ width: 292, cursor: 'pointer' }}\n      onClick={() =>\n        button.link.startsWith('/') ? navigate(button.link) : window.open(button.link, '_blank')\n      }\n    >\n      <img\n        src={image || missingImage}\n        style={{ width: 292, height: 165, borderRadius: 12 }}\n        alt=\"card\"\n      />\n      <Title order={4}>{title}</Title>\n      {description && <Text style={{ fontSize: isMobile ? 14 : 16 }}>{description}</Text>}\n      {button.text && (\n        <RootButton\n          style1={false}\n          onClick={() =>\n            button.link.startsWith('/') ? navigate(button.link) : window.open(button.link, '_blank')\n          }\n        >\n          {button.text}\n        </RootButton>\n      )}\n    </Stack>\n  )\n}\n\nconst GetStarted: React.FC = () => {\n  const {\n    t,\n    i18n: { language },\n  } = useTranslation()\n\n  const errorMessages = useErrorMessages()\n  const [isLoading, setIsLoading] = useState<boolean>(false)\n  const [error, setError] = useState<string>('')\n  const [getStarted, setGetStarted] = useSessionStorage<Entry[]>(`getStarted-${language}`, [])\n  const [galleryImageByEntry, setGalleryImageByEntry] = useState<GalleryElementsImagesByEntryId>({})\n\n  useEffect(() => {\n    if (!getStarted.length) {\n      setIsLoading(true)\n      client\n        .getEntries({ content_type: GET_STARTED_CONTENT_TYPE, locale: language })\n        .then((response: any) => {\n          const sortedContent = response.items.sort(\n            (a: Entry, b: Entry) => a.fields.order - b.fields.order\n          )\n          setGetStarted(sortedContent)\n        })\n        .catch((err: any) => {\n          setError(err.message)\n          setIsLoading(false)\n        })\n        .finally(() => {\n          setIsLoading(false)\n        })\n    }\n  }, [getStarted, setGetStarted, t, language])\n\n  useEffect(() => {\n    if (getStarted) {\n      setGalleryImageByEntry(oldGalleryImageByEntry =>\n        pullGalleryImage(getStarted, oldGalleryImageByEntry, setGalleryImageByEntry)\n      )\n    }\n  }, [getStarted])\n\n  return (\n    <Stack style={{ height: 'inherit', margin: '63px 0 10px 0' }}>\n      {isLoading && <Loading />}\n      {error && <ErrorMessage message={errorMessages.cmsConnection} details={error} />}\n      {!isLoading && !error && (\n        <Stack style={{ gap: '10px', alignItems: 'center', width: '100%' }}>\n          <Title order={4}>{t(`components.getStarted.title`, 'Get Started on LAMINA1')}</Title>\n          <Text>\n            {t(\n              'components.getStarted.subtitle',\n              'Your items, content, and activity will show up here, on your Profile, as you start exploring the LAMINA1 Hub.'\n            )}\n          </Text>\n\n          <Stack\n            style={{\n              alignItems: 'center',\n              width: '100%',\n            }}\n          >\n            <Carousel\n              slideSize={`calc(${100 / getStarted.length}% - 30px)`}\n              slideGap=\"30px\"\n              previousControlIcon={<IconCaretLeftFilled />}\n              nextControlIcon={<IconCaretRightFilled />}\n            >\n              {getStarted &&\n                getStarted.map((elem, index) => {\n                  const card = wrapData(elem, galleryImageByEntry)\n                  return (\n                    <Carousel.Slide key={`${elem}${String(index)}`}>\n                      <CTACard\n                        image={card.image}\n                        title={card.title}\n                        button={{\n                          text: card.buttonText,\n                          link: card.buttonLink,\n                        }}\n                      />\n                    </Carousel.Slide>\n                  )\n                })}\n            </Carousel>\n          </Stack>\n        </Stack>\n      )}\n    </Stack>\n  )\n}\n\nexport default GetStarted\n"],"names":["wrapData","elem","imagesByEntryId","title","buttonLink","signedOut","signedIn","paragraph","getParagraph","description","imageAsset","_a","pullGalleryImage","content","oldEntry","setState","getAssetsByIds","entryIdAssetIdPairs","saveAsset","i","entryId","assetId","asset","client","url","_b","e","newGalleryImageByEntry","_d","_c","entryIdsAssetIdsPairsToRequest","entry","tuple","prevGalleryImageByEntry","CTACard","image","button","theme","useMantineTheme","navigate","useNavigate","isMobile","useMediaQuery","jsxs","Stack","jsx","missingImage","Title","Text","RootButton","GetStarted","t","language","useTranslation","errorMessages","useErrorMessages","isLoading","setIsLoading","useState","error","setError","getStarted","setGetStarted","useSessionStorage","galleryImageByEntry","setGalleryImageByEntry","useEffect","GET_STARTED_CONTENT_TYPE","response","sortedContent","a","b","err","oldGalleryImageByEntry","Loading","ErrorMessage","Carousel","IconCaretLeftFilled","IconCaretRightFilled","index","card"],"mappings":"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"}