fix: Use Banner types from schema

package.json

@@ -38,7 +38,7 @@
   "homepage": "https://github.com/decentraland/ui2#readme",
   "dependencies": {
     "@contentful/rich-text-react-renderer": "^16.0.1",
-    "@dcl/schemas": "^13.9.0",
+    "@dcl/schemas": "^15.6.0",
     "@dcl/ui-env": "^1.5.1",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",

src/components/Banner/Banner.tsx

@@ -1,6 +1,7 @@
 import { documentToReactComponents } from "@contentful/rich-text-react-renderer"
+import { ContentfulLocale } from "@dcl/schemas"
 import CircularProgress from "@mui/material/CircularProgress"
-import { Locales, getAssetUrl } from "../../hooks/contentful"
+import { getAssetUrl } from "../../hooks/contentful"
 import { useTabletAndBelowMediaQuery } from "../Media"
 import { BannerProps, LowercasedAlignment } from "./Banner.types"
 import {
@@ -29,7 +30,13 @@ const convertAlignmentToFlex = (alignment: Property.TextAlign) => {
 }
 
 export const Banner: React.FC<BannerProps> = (props: BannerProps) => {
-  const { isLoading, fields, assets, locale = Locales.enUS, error } = props
+  const {
+    isLoading,
+    fields,
+    assets,
+    locale = ContentfulLocale.enUS,
+    error,
+  } = props
   const isMobileOrTablet = useTabletAndBelowMediaQuery()
 
   if (isLoading) {
@@ -41,38 +48,38 @@ export const Banner: React.FC<BannerProps> = (props: BannerProps) => {
   }
 
   // If there is no banner fields or the banner is not supposed to be shown, return null
-  if (!fields || !fields.showBanner[Locales.enUS] || error) {
+  if (!fields || error) {
     return null
   }
 
   // Build the parameteres based on the size of the screen
   const bannerBackgroundImage = getAssetUrl(
     assets,
-    Locales.enUS,
+    ContentfulLocale.enUS,
     isMobileOrTablet
-      ? fields.mobileBackground[Locales.enUS]
-      : fields.fullSizeBackground[Locales.enUS]
+      ? fields.mobileBackground[ContentfulLocale.enUS]
+      : fields.fullSizeBackground[ContentfulLocale.enUS]
   )
   const title = isMobileOrTablet
     ? fields.mobileTitle[locale]
     : fields.desktopTitle[locale]
   const titleAlignment = (
     isMobileOrTablet
-      ? fields.mobileTitleAlignment[Locales.enUS]
-      : fields.desktopTitleAlignment[Locales.enUS]
+      ? fields.mobileTitleAlignment[ContentfulLocale.enUS]
+      : fields.desktopTitleAlignment[ContentfulLocale.enUS]
   )?.toLowerCase() as LowercasedAlignment
   const text = isMobileOrTablet
     ? fields.mobileText[locale]
     : fields.desktopText[locale]
   const textAlignment = (
     isMobileOrTablet
-      ? fields.mobileTextAlignment[Locales.enUS]
-      : fields.desktopTextAlignment[Locales.enUS]
+      ? fields.mobileTextAlignment[ContentfulLocale.enUS]
+      : fields.desktopTextAlignment[ContentfulLocale.enUS]
   )?.toLowerCase() as LowercasedAlignment
   const buttonAlignment = convertAlignmentToFlex(
     (isMobileOrTablet
-      ? fields.mobileButtonAlignment[Locales.enUS]
-      : fields.desktopButtonAlignment[Locales.enUS]
+      ? fields.mobileButtonAlignment[ContentfulLocale.enUS]
+      : fields.desktopButtonAlignment[ContentfulLocale.enUS]
     )?.toLowerCase() as LowercasedAlignment
   )
 
@@ -87,12 +94,12 @@ export const Banner: React.FC<BannerProps> = (props: BannerProps) => {
           {text ? documentToReactComponents(text) : null}
         </Text>
 
-        {fields.showButton[Locales.enUS] &&
-        fields.buttonLink?.[Locales.enUS] &&
+        {fields.showButton[ContentfulLocale.enUS] &&
+        fields.buttonLink?.[ContentfulLocale.enUS] &&
         fields.buttonsText?.[locale] ? (
           <ButtonContainer justifyContent={buttonAlignment}>
             <Button
-              href={fields.buttonLink[Locales.enUS]}
+              href={fields.buttonLink[ContentfulLocale.enUS]}
               variant="contained"
               disableElevation
             >
@@ -101,9 +108,13 @@ export const Banner: React.FC<BannerProps> = (props: BannerProps) => {
           </ButtonContainer>
         ) : null}
       </Content>
-      {fields.logo && fields.logo[Locales.enUS] && (
+      {fields.logo && fields.logo[ContentfulLocale.enUS] && (
         <Logo
-          src={getAssetUrl(assets, Locales.enUS, fields.logo[Locales.enUS])}
+          src={getAssetUrl(
+            assets,
+            ContentfulLocale.enUS,
+            fields.logo[ContentfulLocale.enUS]
+          )}
           alt="Banner logo"
         />
       )}

src/components/Banner/Banner.types.ts

@@ -1,41 +1,13 @@
-import {
-  AlignmentFieldType,
-  ContentfulAsset,
-  Locales,
-  LocalizedField,
-  SysAssetLink,
-} from "../../hooks/contentful"
-import type { Document } from "@contentful/rich-text-types"
-
-type IBannerFields = {
-  id: LocalizedField<string>
-  showBanner: LocalizedField<boolean>
-  desktopTitle: LocalizedField<string>
-  mobileTitle: LocalizedField<string>
-  mobileTitleAlignment: LocalizedField<AlignmentFieldType>
-  desktopTitleAlignment: LocalizedField<AlignmentFieldType>
-  desktopText: LocalizedField<Document>
-  mobileText: LocalizedField<Document>
-  desktopTextAlignment: LocalizedField<AlignmentFieldType>
-  mobileTextAlignment: LocalizedField<AlignmentFieldType>
-  showButton: LocalizedField<boolean>
-  buttonLink?: LocalizedField<string>
-  buttonsText?: LocalizedField<string>
-  desktopButtonAlignment: LocalizedField<AlignmentFieldType>
-  mobileButtonAlignment: LocalizedField<AlignmentFieldType>
-  fullSizeBackground: LocalizedField<SysAssetLink>
-  mobileBackground: LocalizedField<SysAssetLink>
-  logo?: LocalizedField<SysAssetLink>
-}
+import { BannerFields, ContentfulAsset, ContentfulLocale } from "@dcl/schemas"
 
 type BannerProps = {
-  fields: IBannerFields | null
+  fields: BannerFields | null
   assets: Record<string, ContentfulAsset>
   isLoading: boolean
-  locale?: Locales
+  locale?: ContentfulLocale
   error: string | null
 }
 
 type LowercasedAlignment = "left" | "center" | "right"
 
-export type { BannerProps, IBannerFields, LowercasedAlignment }
+export type { BannerProps, BannerFields, LowercasedAlignment }

src/components/Banner/index.ts

@@ -1,2 +1,2 @@
 export { Banner } from "./Banner"
-export type { BannerProps, IBannerFields } from "./Banner.types"
+export type { BannerProps } from "./Banner.types"

src/components/MarketingBanner/MarketingBanner.stories.tsx

@@ -1,5 +1,5 @@
+import { ContentfulLocale } from "@dcl/schemas"
 import { MarketingBanner } from "./MarketingBanner"
-import { Locales } from "../../hooks/contentful"
 import type { Meta, StoryObj } from "@storybook/react"
 
 const meta = {
@@ -25,14 +25,14 @@ const Default: Story = {
 const SpanishLocale: Story = {
   args: {
     ...Default.args,
-    locale: Locales.es,
+    locale: ContentfulLocale.es,
   },
 }
 
 const ChineseLocale: Story = {
   args: {
     ...Default.args,
-    locale: Locales.zh,
+    locale: ContentfulLocale.zh,
   },
 }
 

src/components/MarketingBanner/MarketingBanner.tsx

@@ -1,16 +1,23 @@
 import React from "react"
-import { Banner, IBannerFields } from "../../components/Banner"
-import { Locales, useGetContentfulEntry } from "../../hooks/contentful"
+import { BannerFields, ContentfulLocale } from "@dcl/schemas"
+import { Banner } from "../../components/Banner"
+import { useGetContentfulEntry } from "../../hooks/contentful"
 import { MarketingBannerProps } from "./MarketingBanner.types"
 
 const BANNER_CONTENT_TYPE = "banner"
 
 export const MarketingBanner: React.FC<MarketingBannerProps> = (
   props: MarketingBannerProps
 ) => {
-  const { id, environment, token, space, locale = Locales.enUS } = props
+  const {
+    id,
+    environment,
+    token,
+    space,
+    locale = ContentfulLocale.enUS,
+  } = props
   const { fields, assets, isLoading, error } =
-    useGetContentfulEntry<IBannerFields>(
+    useGetContentfulEntry<BannerFields>(
       id,
       environment,
       BANNER_CONTENT_TYPE,

src/components/MarketingBanner/MarketingBanner.types.ts

@@ -1,11 +1,11 @@
-import { Locales } from "hooks/contentful"
+import { ContentfulLocale } from "@dcl/schemas"
 
 type MarketingBannerProps = {
   id: string
   environment: string
   token: string
   space: string
-  locale?: Locales
+  locale?: ContentfulLocale
 }
 
 export type { MarketingBannerProps }

src/hooks/contentful/contentful.ts

@@ -1,17 +1,17 @@
 import { useEffect, useState } from "react"
 import {
   ContentfulAsset,
+  ContentfulLocale,
   ContentfulResponse,
-  Locales,
   LocalizedField,
   LocalizedFieldType,
-  SysAssetLink,
-} from "./contentful.types"
+  SysLink,
+} from "@dcl/schemas"
 
 const getAssetUrl = (
   assets: Record<string, ContentfulAsset>,
-  locale: Locales,
-  assetLink?: SysAssetLink
+  locale: ContentfulLocale,
+  assetLink?: SysLink<"Asset">
 ): string => {
   if (!assetLink) return ""
   const asset = assets[assetLink.sys.id]
@@ -66,7 +66,7 @@ const useGetContentfulEntry = <
           throw new Error("No entity found with the specified ID")
         }
 
-        const assetsMap = data.includes.Asset.reduce(
+        const assetsMap = (data.includes.Asset ?? []).reduce(
           (acc, asset) => {
             acc[asset.sys.id] = asset
             return acc

src/hooks/contentful/index.ts

@@ -1,2 +1 @@
-export * from "./contentful.types"
 export * from "./contentful"