From 363859af0f33a21417a59b1bad288c04f821c25c Mon Sep 17 00:00:00 2001 From: Mauricio Date: Thu, 9 Jan 2025 21:26:49 +0100 Subject: [PATCH] Feature/strapi video component (#49) * fix (strapi): add video section with title to partner and product page * feat (video section): connect strapi component with frontend * feat (strapi): video with text section component * feat (video with text section): strapi & frontend --- .../(partners-products)/partners-products.tsx | 39 +++++++++++++++++++ .../page-partner-and-product/schema.json | 7 +++- .../populate-partner-and-products.ts | 6 +++ .../components/sections/video-section.json | 26 +++++++++++++ .../sections/video-with-text-section.json | 28 +++++++++++++ strapi/types/generated/components.d.ts | 34 ++++++++++++++++ strapi/types/generated/contentTypes.d.ts | 3 ++ 7 files changed, 141 insertions(+), 2 deletions(-) create mode 100644 strapi/src/components/sections/video-section.json create mode 100644 strapi/src/components/sections/video-with-text-section.json diff --git a/nextjs/src/app/[locale]/(partners-products)/partners-products.tsx b/nextjs/src/app/[locale]/(partners-products)/partners-products.tsx index 05932a6..0b6599b 100644 --- a/nextjs/src/app/[locale]/(partners-products)/partners-products.tsx +++ b/nextjs/src/app/[locale]/(partners-products)/partners-products.tsx @@ -14,6 +14,9 @@ import ButtonGroup from "@/components/button-group" import NavBar from "@/components/nav-bar/nav-bar" import { LinkedLocale } from "@/components/nav-bar/linked-locales-provider" import { notFound } from "next/navigation" +import ExternalScript from "@/components/external-script" +import SectionCardWide from "@/components/sections/section-card-wide" +import { youtubeSection } from "@/app/[locale]/theme/texts" export default async function PartnersProducts({ activeLocale, @@ -175,6 +178,42 @@ function dynamicSection(section: any, index: number) { ) + case "sections.video-section": + return ( + + + + + + ) + case "sections.video-with-text-section": + return ( + + + + } + > + + + + + ) default: return

Unknown section

} diff --git a/strapi/src/api/page-partner-and-product/content-types/page-partner-and-product/schema.json b/strapi/src/api/page-partner-and-product/content-types/page-partner-and-product/schema.json index ef8e84b..74c4996 100644 --- a/strapi/src/api/page-partner-and-product/content-types/page-partner-and-product/schema.json +++ b/strapi/src/api/page-partner-and-product/content-types/page-partner-and-product/schema.json @@ -4,7 +4,8 @@ "info": { "singularName": "page-partner-and-product", "pluralName": "page-partner-and-products", - "displayName": "Page Partner & Product" + "displayName": "Page Partner & Product", + "description": "" }, "options": { "draftAndPublish": true @@ -73,7 +74,9 @@ "sections.heading-with-link-container", "relations.white-paper-section", "relations.quotes-relation", - "relations.calendly-section" + "relations.calendly-section", + "sections.video-section", + "sections.video-with-text-section" ] } } diff --git a/strapi/src/api/page-partner-and-product/middlewares/populate-partner-and-products.ts b/strapi/src/api/page-partner-and-product/middlewares/populate-partner-and-products.ts index 2218424..92565c7 100644 --- a/strapi/src/api/page-partner-and-product/middlewares/populate-partner-and-products.ts +++ b/strapi/src/api/page-partner-and-product/middlewares/populate-partner-and-products.ts @@ -43,6 +43,12 @@ const populate = { }, }, }, + 'sections.video-section': { + populate: '*', + }, + 'sections.video-with-text-section': { + populate: '*', + }, }, } }; diff --git a/strapi/src/components/sections/video-section.json b/strapi/src/components/sections/video-section.json new file mode 100644 index 0000000..18eaaaa --- /dev/null +++ b/strapi/src/components/sections/video-section.json @@ -0,0 +1,26 @@ +{ + "collectionName": "components_sections_video_sections", + "info": { + "displayName": "Video Section", + "icon": "play", + "description": "" + }, + "options": {}, + "attributes": { + "section_title": { + "type": "string", + "required": true + }, + "embed_html": { + "type": "text", + "required": true, + "default": "use this tool to embed video https://embedresponsively.com/" + }, + "props": { + "type": "component", + "repeatable": false, + "component": "sections.section-props", + "required": true + } + } +} diff --git a/strapi/src/components/sections/video-with-text-section.json b/strapi/src/components/sections/video-with-text-section.json new file mode 100644 index 0000000..30476af --- /dev/null +++ b/strapi/src/components/sections/video-with-text-section.json @@ -0,0 +1,28 @@ +{ + "collectionName": "components_sections_video_with_text_sections", + "info": { + "displayName": "Video With Text Section", + "icon": "play" + }, + "options": {}, + "attributes": { + "props": { + "type": "component", + "repeatable": false, + "component": "sections.section-props", + "required": true + }, + "section_title": { + "type": "string", + "required": true + }, + "embed_html": { + "type": "text", + "required": true + }, + "body": { + "type": "richtext", + "required": true + } + } +} diff --git a/strapi/types/generated/components.d.ts b/strapi/types/generated/components.d.ts index 8f91b7a..9918bdd 100644 --- a/strapi/types/generated/components.d.ts +++ b/strapi/types/generated/components.d.ts @@ -734,6 +734,38 @@ export interface SectionsTwoColumnSection extends Struct.ComponentSchema { }; } +export interface SectionsVideoSection extends Struct.ComponentSchema { + collectionName: 'components_sections_video_sections'; + info: { + description: ''; + displayName: 'Video Section'; + icon: 'play'; + }; + attributes: { + embed_html: Schema.Attribute.Text & + Schema.Attribute.Required & + Schema.Attribute.DefaultTo<'use this tool to embed video https://embedresponsively.com/'>; + props: Schema.Attribute.Component<'sections.section-props', false> & + Schema.Attribute.Required; + section_title: Schema.Attribute.String & Schema.Attribute.Required; + }; +} + +export interface SectionsVideoWithTextSection extends Struct.ComponentSchema { + collectionName: 'components_sections_video_with_text_sections'; + info: { + displayName: 'Video With Text Section'; + icon: 'play'; + }; + attributes: { + body: Schema.Attribute.RichText & Schema.Attribute.Required; + embed_html: Schema.Attribute.Text & Schema.Attribute.Required; + props: Schema.Attribute.Component<'sections.section-props', false> & + Schema.Attribute.Required; + section_title: Schema.Attribute.String & Schema.Attribute.Required; + }; +} + declare module '@strapi/strapi' { export module Public { export interface ComponentSchemas { @@ -778,6 +810,8 @@ declare module '@strapi/strapi' { 'sections.section-with-richt-heading-intro-and-cta': SectionsSectionWithRichtHeadingIntroAndCta; 'sections.text-section-with-cta': SectionsTextSectionWithCta; 'sections.two-column-section': SectionsTwoColumnSection; + 'sections.video-section': SectionsVideoSection; + 'sections.video-with-text-section': SectionsVideoWithTextSection; } } } diff --git a/strapi/types/generated/contentTypes.d.ts b/strapi/types/generated/contentTypes.d.ts index 047bef8..af101dc 100644 --- a/strapi/types/generated/contentTypes.d.ts +++ b/strapi/types/generated/contentTypes.d.ts @@ -969,6 +969,7 @@ export interface ApiPagePartnerAndProductPagePartnerAndProduct extends Struct.CollectionTypeSchema { collectionName: 'page_partner_and_products'; info: { + description: ''; displayName: 'Page Partner & Product'; pluralName: 'page-partner-and-products'; singularName: 'page-partner-and-product'; @@ -1021,6 +1022,8 @@ export interface ApiPagePartnerAndProductPagePartnerAndProduct 'relations.white-paper-section', 'relations.quotes-relation', 'relations.calendly-section', + 'sections.video-section', + 'sections.video-with-text-section', ] > & Schema.Attribute.SetPluginOptions<{