@acorel/contentful-integration/src/lib/default-contentful-config.ts

Contentful integration with SAP Composable Storefront by Acorel

import {ContentfulConfig} from "./contentful-config";
import {
  CmsBannerComponent,
  CmsBannerComponentMedia,
  CmsProductCarouselComponent
} from "@spartacus/core/src/model/cms.model";
import {CmsLinkComponent, CmsParagraphComponent, PageContext} from "@spartacus/core";
import {documentToHtmlString} from "@contentful/rich-text-html-renderer";
import {
  CONTENTFUL_ASSET, CONTENTFUL_CMS_COMP,
  CONTENTFUL_ENTITY_EXT,
  CONTENTFUL_RICH_TEXT, extractCommonCmsProperties,
  renderOptions
} from "./contentful-integration.util";
import {CmsContentfulContentSlotComponent} from "./contentful.models";
import {convertComponents} from "@acorel/graphql-integration";


export const defaultContentfulConfig: ContentfulConfig = {
  contentful: {
    previewUrl: '/preview',
    backend: {
      url: 'https://graphql.contentful.com/content/v1/spaces/',
      accessToken: '',
      space: ''
    },
    components: {
      contentSlot: {
        component: {
          collection: "contentSlot",
          typename: "ContentSlot",
          spartacusTypeCode: "CmsContentfulContentSlotComponent",
          fields: [
            ...CONTENTFUL_CMS_COMP,
            'name',
            'style',
            'backgroundColor',
            {
              operation: "componentsCollection",
              fields: [{
                items: [
                  ...CONTENTFUL_ENTITY_EXT
                ]
              }],
              variables: {
                componentLimit: {
                  name: "limit",
                  value: 10
                }
              }
            }
          ],
          converter: (pageContext: PageContext, item: any): CmsContentfulContentSlotComponent | undefined => {
            if (!item.contentSlot) {
              return undefined;
            }
            const contentSlot = item.contentSlot;
            return {
              ...extractCommonCmsProperties(contentSlot),
              typeCode: "CmsContentfulContentSlotComponent",
              name: contentSlot.name,
              style: contentSlot.style,
              backgroundColor: contentSlot.backgroundColor,
              components: convertComponents(pageContext, contentSlot.componentsCollection.items)
            } as CmsContentfulContentSlotComponent;
          }
        }
      },
      banner: {
        component: {
          collection: "banner",
          typename: "Banner",
          spartacusTypeCode: "BannerComponent",
          fields: [
            ...CONTENTFUL_CMS_COMP,
            'name',
            'external',
            'headline',
            'urlLink',
            {
              media: CONTENTFUL_ASSET
            }
          ],
          converter: (pageContext: PageContext, item: any): CmsBannerComponent | undefined => {
            if (!item.banner) {
              return undefined;
            }
            const banner = item.banner;
            return {
              ...extractCommonCmsProperties(banner),
              typeCode: "BannerComponent",
              content: banner.content,
              name: banner.name,
              external: banner.exterrnal,
              headline: banner.headline,
              urlLink: banner.urlLink,
              media: {
                altText: banner.media.title,
                url: banner.media.url,
                code: banner.media.sys.id,
                mime: banner.media.contentType,
              } as CmsBannerComponentMedia
            } as CmsBannerComponent;
          }
        }
      },
      productCarousel: {
        component: {
          collection: "productCarousel",
          typename: "ProductCarousel",
          spartacusTypeCode: "ProductCarouselComponent",
          fields: [
            ...CONTENTFUL_CMS_COMP,
            'title',
            'products'
          ],
          converter: (pageContext: PageContext, item: any): CmsProductCarouselComponent | undefined => {
            if (!item.productCarousel) {
              return undefined;
            }
            const productCarousel = item.productCarousel;
            return {
              ...extractCommonCmsProperties(productCarousel),
              typeCode: "ProductCarousel",
              title: productCarousel.title,
              productCodes: productCarousel.products.map((e: string) => e.split("/").pop()).join(" ")
            } as CmsProductCarouselComponent;
          }
        }
      },
      link: {
        component: {
          collection: "link",
          typename: "Link",
          spartacusTypeCode: "CMSLinkComponent",
          fields: [
            ...CONTENTFUL_CMS_COMP,
            'url',
            'linkName'
          ],
          converter: (pageContext: PageContext, item: any): CmsLinkComponent | undefined => {
            if (!item.link) {
              return undefined;
            }
            const link = item.link;
            return {
              ...extractCommonCmsProperties(link),
              typeCode: "CMSLinkComponent",
              url: link.url,
              linkName: link.linkName
            } as CmsLinkComponent;
          }
        }
      },
      paragraph: {
        component: {
          collection: "paragraph",
          typename: "Paragraph",
          spartacusTypeCode: "CMSParagraphComponent",
          fields: [
            ...CONTENTFUL_CMS_COMP,
            'title',
            {
              content: CONTENTFUL_RICH_TEXT
            }
          ],
          converter: (pageContext: PageContext, item: any): CmsParagraphComponent | undefined => {
            if (!item.paragraph) {
              return undefined;
            }
            const paragraph = item.paragraph
            return {
              ...extractCommonCmsProperties(paragraph),
              typeCode: "CmsParagraphComponent",
              title: paragraph.title,
              content: documentToHtmlString(paragraph.content.json, renderOptions(paragraph.content.links))
            } as CmsParagraphComponent;
          }
        }
      }
    }
  }
};