feat: fixed content pallette

- /content/container - /content/content-page - /site/pages/landing - /content/theme-wrapper - /site/pages/category
amplience · Oct 3, 2024 · 16aec2d · 16aec2d
1 parent bc37be6
commit 16aec2d
Show file tree

Hide file tree

Showing 12 changed files with 200 additions and 10 deletions.
diff --git a/components/cms-modern/BaseImage/BaseImage.tsx b/components/cms-modern/BaseImage/BaseImage.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { CmsContent } from '@lib/cms/CmsContent';
+import { getImageURL } from '@utils/getImageURL';
+
+type BaseImageProps = {
+    name: string;
+    defaultHost: string;
+    endpoint: string;
+} & CmsContent;
+
+const BaseImage = ({ ...data }: BaseImageProps) => {
+    return (
+        <picture key={data.name} className="amp-dc-image">
+            <img src={getImageURL(data, { strip: true })} className="amp-dc-image-pic" width="100%" alt={data.name} />
+        </picture>
+    );
+};
+
+export default BaseImage;
diff --git a/components/cms-modern/BaseImage/index.ts b/components/cms-modern/BaseImage/index.ts
@@ -0,0 +1 @@
+export { default } from './BaseImage';
diff --git a/components/cms-modern/BaseVideo/BaseVideo.tsx b/components/cms-modern/BaseVideo/BaseVideo.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { CmsContent } from '@lib/cms/CmsContent';
+import { Box } from '@mui/material';
+
+type BaseVideoProps = {
+    name: string;
+    defaultHost: string;
+    endpoint: string;
+} & CmsContent;
+
+const BaseVideo = ({ ...data }: BaseVideoProps) => {
+    return (
+        <Box>
+            <video
+                className="amp-dc-video"
+                style={{ width: '100%' }}
+                crossOrigin="anonymous"
+                poster={`https://${data.defaultHost}/v/${data.endpoint}/${data.name}?protocol=https`}
+                controls
+                src={`https://${data.defaultHost}/v/${data.endpoint}/${data.name}/mp4_720p?protocol=https`}
+            >
+                <source
+                    src={`https://${data.defaultHost}/v/${data.endpoint}/${data.name}/mp4_720p?protocol=https`}
+                    data-res="High"
+                    data-bitrate="2119"
+                    data-label="High"
+                    type="video/mpeg4"
+                />
+
+                <source
+                    src={`https://${data.defaultHost}/v/${data.endpoint}/${data.name}/mp4_480p?protocol=https`}
+                    data-res="Medium"
+                    data-bitrate="689"
+                    data-label="Medium"
+                    type="video/mpeg4"
+                />
+
+                <source
+                    src={`https://${data.defaultHost}/v/${data.endpoint}/${data.name}/webm_720p?protocol=https`}
+                    data-res="High"
+                    data-bitrate="2000"
+                    data-label="high"
+                    type="video/webm"
+                />
+
+                <source
+                    src={`https://${data.defaultHost}/v/${data.endpoint}/${data.name}/webm_480p?protocol=https`}
+                    data-res="Medium"
+                    data-bitrate="624"
+                    data-label="Medium"
+                    type="video/webm"
+                />
+
+                <track
+                    label="English"
+                    kind="captions"
+                    srcLang="en"
+                    src={`https://cdn.c1.amplience.net/c/${data.endpoint}/${data.name}-captions-en-US`}
+                    default
+                />
+            </video>
+            <Box className="pause-button inactive"></Box>
+        </Box>
+    );
+};
+
+export default BaseVideo;
diff --git a/components/cms-modern/BaseVideo/index.ts b/components/cms-modern/BaseVideo/index.ts
@@ -0,0 +1 @@
+export { default } from './BaseVideo';
diff --git a/components/cms-modern/Container/Container.tsx b/components/cms-modern/Container/Container.tsx
@@ -5,9 +5,10 @@ import { Box } from '@mui/material';
 
 interface ContainerProps {
     contentTypes: CmsContent[];
+    fixedContentPallete: CmsContent[];
 }
 
-const Container = ({ contentTypes = [] }: ContainerProps) => {
+const Container = ({ contentTypes = [], fixedContentPallete = [] }: ContainerProps) => {
     return (
         <Box>
             {contentTypes.map((item, index: number) => {
@@ -17,6 +18,13 @@ const Container = ({ contentTypes = [] }: ContainerProps) => {
                     </Box>
                 );
             })}
+            {fixedContentPallete.map((item, index: number) => {
+                return (
+                    <Box key={index}>
+                        <ContentBlock content={item} />
+                    </Box>
+                );
+            })}
         </Box>
     );
 };

diff --git a/components/cms-modern/ContentBlock/ContentBlock.tsx b/components/cms-modern/ContentBlock/ContentBlock.tsx
@@ -35,6 +35,8 @@ import ThemePaletteSpec from '@components/cms-modern/ThemePaletteSpec';
 import ThemeTypographySpec from '@components/cms-modern/ThemeTypographySpec';
 import ThemeWrapper from '@components/cms-modern/ThemeWrapper';
 import Video from '@components/cms-modern/Video';
+import BaseImage from '@components/cms-modern/BaseImage';
+import BaseVideo from '@components/cms-modern/BaseVideo';
 
 import { useRouter } from 'next/router';
 import Generic from '@components/stylitics/Generic/Generic';
@@ -46,6 +48,7 @@ interface ContentBlockProps {
     type?: ContentBlockType;
     content: CmsContent | null;
     components?: { [key: string]: any };
+    palettes?: { [key: string]: any };
 }
 
 const ComponentMapping: any = {
@@ -89,33 +92,84 @@ const ComponentMapping: any = {
     'https://demostore.amplience.com/content/stylitics/gallery': Generic,
     'https://demostore.amplience.com/content/stylitics/classic': Generic,
     'https://demostore.amplience.com/content/stylitics/main-and-detail': Generic,
+    'http://bigcontent.io/cms/schema/v1/core#/definitions/image-link': BaseImage,
+    'http://bigcontent.io/cms/schema/v1/core#/definitions/video-link': BaseVideo,
+};
+
+const PaletteMapping: any = {
+    'advanced-banner': AdvancedBanner,
+    'blog-list': BlogList,
+    'blog-snippet': BlogSnippet,
+    blog: Blog,
+    'card-list': CardList,
+    card: Card,
+    container: Container,
+    'curated-product-grid': CuratedProductGrid,
+    'dynamic-blog-list': DynamicBlogList,
+    html: ExternalBlock,
+    image: Image,
+    'content-page': ContentPage,
+    'product-grid': ProductGrid,
+    'rich-text': CustomRichText,
+    'shoppable-image': ShoppableImage,
+    'simple-banner': SimpleBanner,
+    'simple-localized-banner': SimpleBanner,
+    'simple-banner-bynder': SimpleBannerBynder,
+    slider: Slider,
+    'split-block': SplitBlock,
+    store: Store,
+    text: Text,
+    'theme-wrapper': ThemeWrapper,
+    video: Video,
+    'https://demostore.amplience.com/content/product': ProductContent,
+    'https://demostore.amplience.com/content/product-override': ProductContent,
+    'https://demostore.amplience.com/site/palette': ThemePaletteSpec,
+    'https://demostore.amplience.com/site/typography': ThemeTypographySpec,
+    'https://demostore.amplience.com/slots/banner': BannerSlot,
+    'https://demostore.amplience.com/slots/container': BannerSlot,
+    'https://demostore.amplience.com/slots/flexible': FlexibleSlot,
+    'https://demostore.amplience.com/slots/content-page': BannerSlot,
+    'https://demostore.amplience.com/slots/localized-banner': LocalizedBannerSlot,
+    'https://demostore.amplience.com/slots/personalized-banner': PersonalizedBannerSlot,
+    'https://demostore.amplience.com/content/stylitics/generic': Generic,
+    'https://demostore.amplience.com/content/stylitics/hotspots': Generic,
+    'https://demostore.amplience.com/content/stylitics/moodboard': Generic,
+    'https://demostore.amplience.com/content/stylitics/gallery': Generic,
+    'https://demostore.amplience.com/content/stylitics/classic': Generic,
+    'https://demostore.amplience.com/content/stylitics/main-and-detail': Generic,
 };
 
 const ContentBlock = ({
     content: originalContent,
     type = 'CONTENT',
     components = ComponentMapping,
+    palettes = PaletteMapping,
 }: ContentBlockProps) => {
     const { query } = useRouter() || {};
     const vse = (query?.vse as string) || '';
 
     // Get real-time content from original content
     const [liveContent] = useContent(originalContent, vse);
-    if (!liveContent) {
+    const content = liveContent;
+    let paletteItem = false;
+    let Component = components[content._meta?.schema];
+    if (!Component) {
+        Component = palettes[content.type];
+        if (Component) paletteItem = true;
+    }
+    if (!liveContent && !paletteItem) {
         return null;
     }
 
-    const content = liveContent;
-    const Component = components[content._meta.schema];
     const children = Component ? <Component {...content} /> : <>{JSON.stringify(content)}</>;
 
     const wrappedChildren =
         type === 'SLOT' ? (
-            <CmsSlot key={content._meta.deliveryId} content={content}>
+            <CmsSlot key={content._meta?.deliveryId} content={content}>
                 {children}
             </CmsSlot>
         ) : (
-            <CmsContentItem key={content._meta.deliveryId} content={content}>
+            <CmsContentItem key={content._meta?.deliveryId} content={content}>
                 {children}
             </CmsContentItem>
         );

diff --git a/components/cms-modern/ContentPage/ContentPage.tsx b/components/cms-modern/ContentPage/ContentPage.tsx
@@ -5,10 +5,17 @@ import { Box, Typography } from '@mui/material';
 
 interface ContentPageProps {
     contentTypes: CmsContent[];
+    contentPallete: CmsContent[];
+    fixedContentPallete: CmsContent[];
     seo: any;
 }
 
-const ContentPage = ({ contentTypes = [], seo = {} }: ContentPageProps) => {
+const ContentPage = ({
+    contentTypes = [],
+    contentPallete = [],
+    fixedContentPallete = [],
+    seo = {},
+}: ContentPageProps) => {
     return (
         <Box>
             <Typography variant="h1" component="h1">
@@ -24,6 +31,20 @@ const ContentPage = ({ contentTypes = [], seo = {} }: ContentPageProps) => {
                     </Box>
                 );
             })}
+            {contentPallete.map((item, index: number) => {
+                return (
+                    <Box key={index}>
+                        <ContentBlock content={item} />
+                    </Box>
+                );
+            })}
+            {fixedContentPallete.map((item, index: number) => {
+                return (
+                    <Box key={index}>
+                        <ContentBlock content={item} />
+                    </Box>
+                );
+            })}
         </Box>
     );
 };

diff --git a/components/cms-modern/ThemeWrapper/ThemeWrapper.tsx b/components/cms-modern/ThemeWrapper/ThemeWrapper.tsx
@@ -8,9 +8,10 @@ import { Box } from '@mui/material';
 interface ThemeWrapperProps {
     theme: CmsHierarchyNode;
     components: CmsContent[];
+    fixedContentPallete: CmsContent[];
 }
 
-const ThemeWrapper = ({ theme, components = [] }: ThemeWrapperProps) => {
+const ThemeWrapper = ({ theme, components = [], fixedContentPallete = [] }: ThemeWrapperProps) => {
     const { themes } = useThemes();
 
     return (
@@ -23,6 +24,13 @@ const ThemeWrapper = ({ theme, components = [] }: ThemeWrapperProps) => {
                         </Box>
                     );
                 })}
+                {fixedContentPallete.map((item, index: number) => {
+                    return (
+                        <Box key={index}>
+                            <ContentBlock content={item} />
+                        </Box>
+                    );
+                })}
             </Box>
         </WithCMSTheme>
     );

diff --git a/components/cms-modern/index.ts b/components/cms-modern/index.ts
@@ -20,3 +20,5 @@ export { default as ThemePaletteSpec } from './ThemePaletteSpec';
 export { default as ThemeTypographySpec } from './ThemeTypographySpec';
 export { default as ThemeWrapper } from './ThemeWrapper';
 export { default as Video } from './Video';
+export { default as BaseImage } from './BaseImage';
+export { default as BaseVideo } from './BaseVideo';
diff --git a/components/core/Masthead/walkNavigation.tsx b/components/core/Masthead/walkNavigation.tsx
@@ -4,7 +4,7 @@ import { NavigationItem } from './NavigationContext';
 export default function walkNavigation(
     current: NavigationItem,
     visitor: (item: NavigationItem, parents: NavigationItem[]) => void,
-    parents: NavigationItem[] = []
+    parents: NavigationItem[] = [],
 ) {
     visitor(current, parents);
     for (let child of current.children) {
@@ -14,7 +14,7 @@ export default function walkNavigation(
 
 export function walkNavigationItems(
     items: NavigationItem[],
-    visitor: (item: NavigationItem, parents: NavigationItem[]) => void
+    visitor: (item: NavigationItem, parents: NavigationItem[]) => void,
 ) {
     for (let item of items) {
         walkNavigation(item, visitor);
@@ -90,6 +90,7 @@ export function enrichCmsEntries(cmsEntry: CmsHierarchyNode, categoriesById: any
                         ecommCategories: true,
                         hideProductList: false,
                         components: [],
+                        fixedContentPallete: [],
                         slots: [],
                         active: true,
                         menu: {

diff --git a/pages/category/[slug].tsx b/pages/category/[slug].tsx
@@ -108,6 +108,7 @@ function CategoryPage(props: InferGetServerSidePropsType<typeof getServerSidePro
     const [config] = useContent(content.configComponents, vse);
 
     let components: CmsContent[] = props.content?.page?.components || [];
+    let fixedContentPallete: CmsContent[] = props.content?.page?.fixedContentPallete || [];
     let pageSlots: CmsContent[] = slots;
     let products: Product[] = category?.products;
 
@@ -129,6 +130,10 @@ function CategoryPage(props: InferGetServerSidePropsType<typeof getServerSidePro
                         <ContentBlock key={index} content={content} />
                     ))}
 
+                    {compact(fixedContentPallete).map((content, index: number) => (
+                        <ContentBlock key={index} content={content} />
+                    ))}
+
                     {/* Slots and Content */}
                     <div className="af-main-content">
                         {compact(pageSlots).map((slot, index: number) => (

diff --git a/pages/page/[...slug].tsx b/pages/page/[...slug].tsx
@@ -50,6 +50,9 @@ export default function LandingPage({ content, slots }: InferGetServerSidePropsT
             {content?.page?.components
                 ?.filter(notNull)
                 .map((content: CmsContent, index: number) => <ContentBlock content={content} key={index} />)}
+            {content?.page?.fixedContentPallete
+                ?.filter(notNull)
+                .map((content: CmsContent, index: number) => <ContentBlock content={content} key={index} />)}
         </div>
     );
 }