diff --git a/backend/api/pages/models/pages.settings.json b/backend/api/pages/models/pages.settings.json index 73aa98b2..fdb70f98 100644 --- a/backend/api/pages/models/pages.settings.json +++ b/backend/api/pages/models/pages.settings.json @@ -47,6 +47,7 @@ "section.card-section", "section.hero-section", "section.single-feature-section", + "blocks.multi-feature-block", "section.simple-section" ] } diff --git a/backend/components/blocks/feature-description.json b/backend/components/blocks/feature-description.json new file mode 100644 index 00000000..d00cff60 --- /dev/null +++ b/backend/components/blocks/feature-description.json @@ -0,0 +1,14 @@ +{ + "collectionName": "components_blocks_feature_descriptions", + "info": { + "name": "featureDescription", + "icon": "angle-double-right", + "description": "" + }, + "options": {}, + "attributes": { + "description": { + "type": "string" + } + } +} diff --git a/backend/components/blocks/multi-feature-block.json b/backend/components/blocks/multi-feature-block.json new file mode 100644 index 00000000..b1ab7378 --- /dev/null +++ b/backend/components/blocks/multi-feature-block.json @@ -0,0 +1,38 @@ +{ + "collectionName": "components_blocks_multi_feature_blocks", + "info": { + "name": "multiFeatureBlock", + "icon": "arrow-left", + "description": "" + }, + "options": {}, + "attributes": { + "title": { + "type": "string" + }, + "image": { + "model": "file", + "via": "related", + "allowedTypes": [ + "images" + ], + "plugin": "upload", + "required": false, + "pluginOptions": {} + }, + "bubbleColor": { + "type": "string" + }, + "blocks": { + "type": "component", + "repeatable": true, + "component": "blocks.feature-description" + }, + "description": { + "type": "richtext" + }, + "checkColor": { + "type": "string" + } + } +} diff --git a/frontend/components/CheckIcon.tsx b/frontend/components/CheckIcon.tsx new file mode 100644 index 00000000..738512d0 --- /dev/null +++ b/frontend/components/CheckIcon.tsx @@ -0,0 +1,20 @@ +import { Icon, IconProps } from "@chakra-ui/react"; +import React from "react"; + +export default function CheckIcon({ color, ...otherProps }: IconProps) { + return ( + + + + ); +} diff --git a/frontend/features/page/index.ts b/frontend/features/page/index.ts index e64a73a9..cec66d6b 100644 --- a/frontend/features/page/index.ts +++ b/frontend/features/page/index.ts @@ -14,16 +14,22 @@ import { SimpleSectionBlockData, simpleSectionBlock, } from "./sections/SimpleSection/blocks/SimpleSectionBlock"; +import { + multiFeatureBlock, + MultiFeatureBlockData, +} from "./sections/CardListSection/blocks/MultiFeatureBlock"; export const SECTION_PAGE_BLOCKS = { heroSection: heroSectionBlock, featureListSection: featureSectionBlock, cardListSection: cardSectionBlock, simpleSection: simpleSectionBlock, + multiFeatureBlock: multiFeatureBlock, }; export type SectionBlockData = | HeroSectionBlockData | FeatureListSectionBlockData | CardSectionBlockData - | SimpleSectionBlockData; + | SimpleSectionBlockData + | MultiFeatureBlockData; diff --git a/frontend/features/page/sections/CardListSection/blocks/MultiFeatureBlock.tsx b/frontend/features/page/sections/CardListSection/blocks/MultiFeatureBlock.tsx new file mode 100644 index 00000000..d3377b61 --- /dev/null +++ b/frontend/features/page/sections/CardListSection/blocks/MultiFeatureBlock.tsx @@ -0,0 +1,233 @@ +import { Box, Flex, Img } from "@chakra-ui/react"; +import Bubble from "@components/Bubble"; +import { STRAPI_URL } from "@config/env"; +import React from "react"; +import { + Block, + BlockComponentProps, + BlocksControls, + InlineBlocks, + InlineImage, + InlineTextarea, +} from "react-tinacms-inline"; +import { useCMS } from "tinacms"; +import { MULTI_FEATURE_BLOCK } from "@features/page/sections"; +import { MultiFeatureDescriptionBlockData } from "./MultiFeatureDescritpionBlock"; +import { InlineWysiwyg } from "react-tinacms-editor"; + +export type MultiFeatureBlockData = BlockTemplateData< + "multiFeatureBlock", + { + id: string; + title: Nullable; + description: Nullable; + bubbleColor: Nullable; + checkColor: Nullable; + image: Nullable; + blocks: MultiFeatureDescriptionBlockData[]; + } +>; + +type MultiFeatureImageType = { + id: string; + url: Nullable; + alternativeText: Nullable; +}; + +interface MultiFeatureBlockProps { + bubbleColor: string; + image: Nullable; + index: number; + description: string; +} + +interface ImageRenderProps { + src: { + url?: string; + previewSrc?: string; + }; +} + +export function MultiFeatureBlock({ + bubbleColor, + image, + description, + index, +}: MultiFeatureBlockProps) { + const cms = useCMS(); + return ( + + + + + {cms.enabled ? ( + + "/"} + previewSrc={(imageSrc) => { + if (imageSrc === "") { + return "/images/default-image.png"; + } + + return imageSrc; + }} + parse={(media) => { + return media as any; + }}> + {(imageProps: any) => { + const { src } = imageProps as ImageRenderProps; + let imageSrc: string = src.previewSrc || src.url || ""; + if (imageSrc === "") { + imageSrc = "/images/default-image.png"; + } else if (!imageSrc.startsWith("http")) { + imageSrc = `${STRAPI_URL}${imageSrc}`; + } + return ( + + Cover image + + ); + }} + + + ) : ( + + + + )} + + + + + + + + {description} + + + + + + + + ); +} + +function BlockComponent({ index, data }: BlockComponentProps) { + return ( + + + + ); +} + +export const multiFeatureBlock: Block = { + Component: BlockComponent, + template: { + label: "Multi feature block", + defaultItem: { + title: "Default title", + description: "Default description", + blocks: [ + { + _template: "multiFeature", + description: "Default description", + }, + { + _template: "multiFeature", + description: "Default description", + }, + { + _template: "multiFeature", + description: "Default description", + }, + ], + }, + + fields: [ + { + name: "bubbleColor", + component: "color", + label: "Bubble color", + }, + { + name: "checkColor", + component: "color", + label: "Check icon color", + }, + ], + }, +}; diff --git a/frontend/features/page/sections/CardListSection/blocks/MultiFeatureDescritpionBlock.tsx b/frontend/features/page/sections/CardListSection/blocks/MultiFeatureDescritpionBlock.tsx new file mode 100644 index 00000000..2c170fef --- /dev/null +++ b/frontend/features/page/sections/CardListSection/blocks/MultiFeatureDescritpionBlock.tsx @@ -0,0 +1,76 @@ +import { Box, chakra, Flex } from "@chakra-ui/react"; +import CheckIcon from "@components/CheckIcon"; +import React from "react"; +import { + BlockComponentProps, + BlocksControls, + Block, + InlineTextarea, +} from "react-tinacms-inline"; + +export type MultiFeatureDescriptionBlockData = BlockTemplateData< + "multiFeature", + { + id: string; + description: Nullable; + bubbleColor: Nullable; + checkColor: Nullable; + } +>; + +interface MultiFeatureDescriptionBlockProps { + bubbleColor: string; + checkColor: string; +} + +const StyledInlineTextarea = chakra(InlineTextarea); + +export function MultiFeatureDescriptionBlock({ + bubbleColor, + checkColor, +}: MultiFeatureDescriptionBlockProps) { + return ( + + + + + + + + + ); +} + +function BlockComponent({ index, data }: BlockComponentProps) { + return ( + + + + ); +} + +export const multiFeatureDescriptionBlock: Block = { + Component: BlockComponent, + template: { + label: "Feature description", + defaultItem: { + description: "Default description", + }, + fields: [], + }, +}; diff --git a/frontend/features/page/sections/index.ts b/frontend/features/page/sections/index.ts index 0ef064ff..f8e8e4e7 100644 --- a/frontend/features/page/sections/index.ts +++ b/frontend/features/page/sections/index.ts @@ -1,4 +1,9 @@ import { cardBlock, CardBlockData } from "./CardListSection/blocks/CardBlock"; + +import { + multiFeatureDescriptionBlock, + MultiFeatureDescriptionBlockData, +} from "./CardListSection/blocks/MultiFeatureDescritpionBlock"; import { featureBlock, FeatureBlockData, @@ -12,4 +17,11 @@ export const CARD_BLOCK = { card: cardBlock, }; -export type BlockData = CardBlockData | FeatureBlockData; +export const MULTI_FEATURE_BLOCK = { + multiFeature: multiFeatureDescriptionBlock, +}; + +export type BlockData = + | CardBlockData + | FeatureBlockData + | MultiFeatureDescriptionBlockData; diff --git a/frontend/graphql.schema.json b/frontend/graphql.schema.json index 7aba0da8..38384b20 100644 --- a/frontend/graphql.schema.json +++ b/frontend/graphql.schema.json @@ -289,6 +289,258 @@ "enumValues": null, "possibleTypes": null }, + { + "kind": "OBJECT", + "name": "ComponentBlocksFeatureDescription", + "description": null, + "fields": [ + { + "name": "id", + "description": null, + "args": [], + "type": { + "kind": "NON_NULL", + "name": null, + "ofType": { + "kind": "SCALAR", + "name": "ID", + "ofType": null + } + }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "description", + "description": null, + "args": [], + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "isDeprecated": false, + "deprecationReason": null + } + ], + "inputFields": null, + "interfaces": [], + "enumValues": null, + "possibleTypes": null + }, + { + "kind": "INPUT_OBJECT", + "name": "ComponentBlocksFeatureDescriptionInput", + "description": null, + "fields": null, + "inputFields": [ + { + "name": "description", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + } + ], + "interfaces": null, + "enumValues": null, + "possibleTypes": null + }, + { + "kind": "OBJECT", + "name": "ComponentBlocksMultiFeatureBlock", + "description": null, + "fields": [ + { + "name": "id", + "description": null, + "args": [], + "type": { + "kind": "NON_NULL", + "name": null, + "ofType": { + "kind": "SCALAR", + "name": "ID", + "ofType": null + } + }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "title", + "description": null, + "args": [], + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "image", + "description": null, + "args": [], + "type": { + "kind": "OBJECT", + "name": "UploadFile", + "ofType": null + }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "bubbleColor", + "description": null, + "args": [], + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "blocks", + "description": null, + "args": [], + "type": { + "kind": "LIST", + "name": null, + "ofType": { + "kind": "OBJECT", + "name": "ComponentBlocksFeatureDescription", + "ofType": null + } + }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "description", + "description": null, + "args": [], + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "checkColor", + "description": null, + "args": [], + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "isDeprecated": false, + "deprecationReason": null + } + ], + "inputFields": null, + "interfaces": [], + "enumValues": null, + "possibleTypes": null + }, + { + "kind": "INPUT_OBJECT", + "name": "ComponentBlocksMultiFeatureBlockInput", + "description": null, + "fields": null, + "inputFields": [ + { + "name": "title", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "image", + "description": null, + "type": { + "kind": "SCALAR", + "name": "ID", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "bubbleColor", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "blocks", + "description": null, + "type": { + "kind": "LIST", + "name": null, + "ofType": { + "kind": "INPUT_OBJECT", + "name": "ComponentBlocksFeatureDescriptionInput", + "ofType": null + } + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "description", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "checkColor", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + } + ], + "interfaces": null, + "enumValues": null, + "possibleTypes": null + }, { "kind": "OBJECT", "name": "ComponentBlocksNavigationBlock", @@ -3087,6 +3339,16 @@ "name": "ComponentBlocksCard", "ofType": null }, + { + "kind": "OBJECT", + "name": "ComponentBlocksFeatureDescription", + "ofType": null + }, + { + "kind": "OBJECT", + "name": "ComponentBlocksMultiFeatureBlock", + "ofType": null + }, { "kind": "OBJECT", "name": "ComponentBlocksNavigationBlock", @@ -4811,6 +5073,11 @@ "name": "ComponentSectionSingleFeatureSection", "ofType": null }, + { + "kind": "OBJECT", + "name": "ComponentBlocksMultiFeatureBlock", + "ofType": null + }, { "kind": "OBJECT", "name": "ComponentSectionSimpleSection", @@ -9753,6 +10020,140 @@ "enumValues": null, "possibleTypes": null }, + { + "kind": "INPUT_OBJECT", + "name": "editComponentBlocksFeatureDescriptionInput", + "description": null, + "fields": null, + "inputFields": [ + { + "name": "id", + "description": null, + "type": { + "kind": "SCALAR", + "name": "ID", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "description", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + } + ], + "interfaces": null, + "enumValues": null, + "possibleTypes": null + }, + { + "kind": "INPUT_OBJECT", + "name": "editComponentBlocksMultiFeatureBlockInput", + "description": null, + "fields": null, + "inputFields": [ + { + "name": "id", + "description": null, + "type": { + "kind": "SCALAR", + "name": "ID", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "title", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "image", + "description": null, + "type": { + "kind": "SCALAR", + "name": "ID", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "bubbleColor", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "blocks", + "description": null, + "type": { + "kind": "LIST", + "name": null, + "ofType": { + "kind": "INPUT_OBJECT", + "name": "editComponentBlocksFeatureDescriptionInput", + "ofType": null + } + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "description", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "checkColor", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + } + ], + "interfaces": null, + "enumValues": null, + "possibleTypes": null + }, { "kind": "INPUT_OBJECT", "name": "editComponentBlocksNavigationBlockInput", diff --git a/frontend/graphql/GetPages.graphql b/frontend/graphql/GetPages.graphql index 1f26364f..d1ebe2cb 100644 --- a/frontend/graphql/GetPages.graphql +++ b/frontend/graphql/GetPages.graphql @@ -61,6 +61,23 @@ query GetPages($where: JSON, $locale: String) { label } } + ... on ComponentBlocksMultiFeatureBlock { + __typename + id + title + description + image { + id + url + alternativeText + } + bubbleColor + checkColor + blocks { + id + description + } + } ... on ComponentSectionSimpleSection { __typename id diff --git a/frontend/graphql/generated.ts b/frontend/graphql/generated.ts index 51482cb8..4a210108 100644 --- a/frontend/graphql/generated.ts +++ b/frontend/graphql/generated.ts @@ -51,6 +51,36 @@ export type ComponentBlocksCardInput = { label: Scalars['String']; }; +export type ComponentBlocksFeatureDescription = { + __typename?: 'ComponentBlocksFeatureDescription'; + id: Scalars['ID']; + description?: Maybe; +}; + +export type ComponentBlocksFeatureDescriptionInput = { + description?: Maybe; +}; + +export type ComponentBlocksMultiFeatureBlock = { + __typename?: 'ComponentBlocksMultiFeatureBlock'; + id: Scalars['ID']; + title?: Maybe; + image?: Maybe; + bubbleColor?: Maybe; + blocks?: Maybe>>; + description?: Maybe; + checkColor?: Maybe; +}; + +export type ComponentBlocksMultiFeatureBlockInput = { + title?: Maybe; + image?: Maybe; + bubbleColor?: Maybe; + blocks?: Maybe>>; + description?: Maybe; + checkColor?: Maybe; +}; + export type ComponentBlocksNavigationBlock = { __typename?: 'ComponentBlocksNavigationBlock'; id: Scalars['ID']; @@ -324,7 +354,7 @@ export type MenuInput = { updated_by?: Maybe; }; -export type Morph = UsersPermissionsMe | UsersPermissionsMeRole | UsersPermissionsLoginPayload | UserPermissionsPasswordPayload | Global | UpdateGlobalPayload | DeleteGlobalPayload | Menu | MenuConnection | MenuAggregator | MenuGroupBy | MenuConnectionId | MenuConnectionCreated_At | MenuConnectionUpdated_At | MenuConnectionTitle | MenuConnectionPublished_At | CreateMenuPayload | UpdateMenuPayload | DeleteMenuPayload | Pages | PagesConnection | PagesAggregator | PagesGroupBy | PagesConnectionId | PagesConnectionCreated_At | PagesConnectionUpdated_At | PagesConnectionTitle | PagesConnectionPath | PagesConnectionLocale | PagesConnectionPublished_At | CreatePagePayload | UpdatePagePayload | DeletePagePayload | I18NLocale | UploadFile | UploadFileConnection | UploadFileAggregator | UploadFileAggregatorSum | UploadFileAggregatorAvg | UploadFileAggregatorMin | UploadFileAggregatorMax | UploadFileGroupBy | UploadFileConnectionId | UploadFileConnectionCreated_At | UploadFileConnectionUpdated_At | UploadFileConnectionName | UploadFileConnectionAlternativeText | UploadFileConnectionCaption | UploadFileConnectionWidth | UploadFileConnectionHeight | UploadFileConnectionFormats | UploadFileConnectionHash | UploadFileConnectionExt | UploadFileConnectionMime | UploadFileConnectionSize | UploadFileConnectionUrl | UploadFileConnectionPreviewUrl | UploadFileConnectionProvider | UploadFileConnectionProvider_Metadata | DeleteFilePayload | UsersPermissionsPermission | UsersPermissionsRole | UsersPermissionsRoleConnection | UsersPermissionsRoleAggregator | UsersPermissionsRoleGroupBy | UsersPermissionsRoleConnectionId | UsersPermissionsRoleConnectionName | UsersPermissionsRoleConnectionDescription | UsersPermissionsRoleConnectionType | CreateRolePayload | UpdateRolePayload | DeleteRolePayload | UsersPermissionsUser | UsersPermissionsUserConnection | UsersPermissionsUserAggregator | UsersPermissionsUserGroupBy | UsersPermissionsUserConnectionId | UsersPermissionsUserConnectionCreated_At | UsersPermissionsUserConnectionUpdated_At | UsersPermissionsUserConnectionUsername | UsersPermissionsUserConnectionEmail | UsersPermissionsUserConnectionProvider | UsersPermissionsUserConnectionConfirmed | UsersPermissionsUserConnectionBlocked | UsersPermissionsUserConnectionRole | CreateUserPayload | UpdateUserPayload | DeleteUserPayload | ComponentBlocksCard | ComponentBlocksNavigationBlock | ComponentBlocksSingleFeature | ComponentGlobalTopbar | ComponentMenuPageLink | ComponentSectionCardSection | ComponentSectionFooterSection | ComponentSectionHeroSection | ComponentSectionSimpleSection | ComponentSectionSingleFeatureSection; +export type Morph = UsersPermissionsMe | UsersPermissionsMeRole | UsersPermissionsLoginPayload | UserPermissionsPasswordPayload | Global | UpdateGlobalPayload | DeleteGlobalPayload | Menu | MenuConnection | MenuAggregator | MenuGroupBy | MenuConnectionId | MenuConnectionCreated_At | MenuConnectionUpdated_At | MenuConnectionTitle | MenuConnectionPublished_At | CreateMenuPayload | UpdateMenuPayload | DeleteMenuPayload | Pages | PagesConnection | PagesAggregator | PagesGroupBy | PagesConnectionId | PagesConnectionCreated_At | PagesConnectionUpdated_At | PagesConnectionTitle | PagesConnectionPath | PagesConnectionLocale | PagesConnectionPublished_At | CreatePagePayload | UpdatePagePayload | DeletePagePayload | I18NLocale | UploadFile | UploadFileConnection | UploadFileAggregator | UploadFileAggregatorSum | UploadFileAggregatorAvg | UploadFileAggregatorMin | UploadFileAggregatorMax | UploadFileGroupBy | UploadFileConnectionId | UploadFileConnectionCreated_At | UploadFileConnectionUpdated_At | UploadFileConnectionName | UploadFileConnectionAlternativeText | UploadFileConnectionCaption | UploadFileConnectionWidth | UploadFileConnectionHeight | UploadFileConnectionFormats | UploadFileConnectionHash | UploadFileConnectionExt | UploadFileConnectionMime | UploadFileConnectionSize | UploadFileConnectionUrl | UploadFileConnectionPreviewUrl | UploadFileConnectionProvider | UploadFileConnectionProvider_Metadata | DeleteFilePayload | UsersPermissionsPermission | UsersPermissionsRole | UsersPermissionsRoleConnection | UsersPermissionsRoleAggregator | UsersPermissionsRoleGroupBy | UsersPermissionsRoleConnectionId | UsersPermissionsRoleConnectionName | UsersPermissionsRoleConnectionDescription | UsersPermissionsRoleConnectionType | CreateRolePayload | UpdateRolePayload | DeleteRolePayload | UsersPermissionsUser | UsersPermissionsUserConnection | UsersPermissionsUserAggregator | UsersPermissionsUserGroupBy | UsersPermissionsUserConnectionId | UsersPermissionsUserConnectionCreated_At | UsersPermissionsUserConnectionUpdated_At | UsersPermissionsUserConnectionUsername | UsersPermissionsUserConnectionEmail | UsersPermissionsUserConnectionProvider | UsersPermissionsUserConnectionConfirmed | UsersPermissionsUserConnectionBlocked | UsersPermissionsUserConnectionRole | CreateUserPayload | UpdateUserPayload | DeleteUserPayload | ComponentBlocksCard | ComponentBlocksFeatureDescription | ComponentBlocksMultiFeatureBlock | ComponentBlocksNavigationBlock | ComponentBlocksSingleFeature | ComponentGlobalTopbar | ComponentMenuPageLink | ComponentSectionCardSection | ComponentSectionFooterSection | ComponentSectionHeroSection | ComponentSectionSimpleSection | ComponentSectionSingleFeatureSection; export type Mutation = { __typename?: 'Mutation'; @@ -598,7 +628,7 @@ export type PagesGroupBy = { published_at?: Maybe>>; }; -export type PagesSectionsDynamicZone = ComponentSectionCardSection | ComponentSectionHeroSection | ComponentSectionSingleFeatureSection | ComponentSectionSimpleSection; +export type PagesSectionsDynamicZone = ComponentSectionCardSection | ComponentSectionHeroSection | ComponentSectionSingleFeatureSection | ComponentBlocksMultiFeatureBlock | ComponentSectionSimpleSection; export enum PublicationState { @@ -1279,6 +1309,21 @@ export type EditComponentBlocksCardInput = { label?: Maybe; }; +export type EditComponentBlocksFeatureDescriptionInput = { + id?: Maybe; + description?: Maybe; +}; + +export type EditComponentBlocksMultiFeatureBlockInput = { + id?: Maybe; + title?: Maybe; + image?: Maybe; + bubbleColor?: Maybe; + blocks?: Maybe>>; + description?: Maybe; + checkColor?: Maybe; +}; + export type EditComponentBlocksNavigationBlockInput = { id?: Maybe; label?: Maybe; @@ -1508,6 +1553,16 @@ export type GetPagesQuery = ( & Pick )> } )>>> } + ) | ( + { __typename: 'ComponentBlocksMultiFeatureBlock' } + & Pick + & { image?: Maybe<( + { __typename?: 'UploadFile' } + & Pick + )>, blocks?: Maybe + )>>> } ) | ( { __typename: 'ComponentSectionSimpleSection' } & Pick @@ -1658,6 +1713,23 @@ export const GetPages = ` label } } + ... on ComponentBlocksMultiFeatureBlock { + __typename + id + title + description + image { + id + url + alternativeText + } + bubbleColor + checkColor + blocks { + id + description + } + } ... on ComponentSectionSimpleSection { __typename id diff --git a/frontend/pages/[[...slug]].tsx b/frontend/pages/[[...slug]].tsx index 7f8b195e..9d999e43 100644 --- a/frontend/pages/[[...slug]].tsx +++ b/frontend/pages/[[...slug]].tsx @@ -41,6 +41,7 @@ import { LocaleMenuList, LocaleMenuLink, } from "@components/LocaleMenu"; +import { MultiFeatureDescriptionBlockData } from "@features/page/sections/CardListSection/blocks/MultiFeatureDescritpionBlock"; interface DynamicPageProps { path: string[]; @@ -377,6 +378,39 @@ function getPageData( sectionTitleColor: section.sectionTitleColor || null, }; } + + case "ComponentBlocksMultiFeatureBlock": { + return { + _template: "multiFeatureBlock", + id: section.id, + title: section.title || null, + description: section.description || null, + image: section.image + ? { + id: section.image.id, + url: section.image.url, + alternativeText: section.image.alternativeText || null, + } + : null, + bubbleColor: section.bubbleColor || null, + checkColor: section.checkColor || null, + + blocks: section.blocks + ? filterListNullableItems( + section.blocks + ).map((feature) => { + return { + _template: "multiFeature", + id: feature.id, + description: feature.description || null, + bubbleColor: section.bubbleColor || null, + checkColor: section.checkColor || null, + }; + }) + : [], + }; + } + default: return assertNever(section); } diff --git a/frontend/plugins/usePagePlugin.ts b/frontend/plugins/usePagePlugin.ts index e1f2ec83..2db5c47d 100644 --- a/frontend/plugins/usePagePlugin.ts +++ b/frontend/plugins/usePagePlugin.ts @@ -17,6 +17,7 @@ import { usePlugin, } from "tinacms"; import { assertNever } from "@utils"; +import { MultiFeatureDescriptionBlockData } from "@features/page/sections/CardListSection/blocks/MultiFeatureDescritpionBlock"; export interface PageData { id: string; @@ -75,8 +76,6 @@ export function usePagePlugin(data: Data): [Data, Form] { menuInput, }); - console.log("response", JSON.stringify(response, null, " ")); - if (response.errors != null) { cms.alerts.error("Error while saving data", 10000); } else { @@ -187,6 +186,33 @@ function getPageInput(data: PageData): UpdatePageInput { subtitle: section.subtitle, }; } + case "multiFeatureBlock": { + return { + __typename: "ComponentBlocksMultiFeatureBlock", + id: section.id, + title: section.title || null, + description: section.description || null, + image: section.image + ? { + id: section.image.id, + url: section.image.url, + alternativeText: section.image.alternativeText || null, + } + : null, + bubbleColor: section.bubbleColor || null, + blocks: section.blocks.map( + (feature) => { + return { + _template: "multiFeature", + id: feature.id, + description: feature.description || null, + bubbleColor: section.bubbleColor || null, + checkColor: section.checkColor || null, + }; + } + ), + }; + } default: return assertNever(section); }