api.http

@@ -27,3 +27,7 @@ Accept: application/json
 ### GET request with a header
 GET {{domain}}/api/yoga-single-services?filters[name][$eq]=service4
 Accept: application/json
+
+### GET service page
+GET {{domain}}/api/service-page?fields[0]=*&populate[subscribeNow][fields][0]=*&populate[footer][fields][0]=*&populate[footer][populate][links][fields][0]=*&populate[footer][populate][contactUsEmail][fields][0]=*&populate[footer][populate][contactUsLocation][fields][0]=*&populate[footer][populate][contactUsPhoneNumber][fields][0]=*
+Accept: application/json

yoga-app/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@fortawesome/fontawesome-free": "^6.7.2",
+        "@strapi/blocks-react-renderer": "^1.0.2",
         "@strapi/database": "^5.10.3",
         "@types/aos": "^3.0.7",
         "@types/bcrypt": "^5.0.2",
@@ -1393,6 +1394,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/@strapi/blocks-react-renderer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@strapi/blocks-react-renderer/-/blocks-react-renderer-1.0.2.tgz",
+      "integrity": "sha512-pRV/WMreo5wyrLg7J0pw1DM9lg8U8m+QA7Bd8CPN3beUBTdDhYrFTTNZh3XveEdnURZNJu1X0aWXAg4SzVg7QA==",
+      "hasInstallScript": true,
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@strapi/database": {
       "version": "5.10.3",
       "resolved": "https://registry.npmjs.org/@strapi/database/-/database-5.10.3.tgz",

yoga-app/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.7.2",
+    "@strapi/blocks-react-renderer": "^1.0.2",
     "@strapi/database": "^5.10.3",
     "@types/aos": "^3.0.7",
     "@types/bcrypt": "^5.0.2",

yoga-app/src/api/strapi/query/service.json

@@ -0,0 +1,25 @@
+{
+  "fields": ["*"],
+  "populate": {
+    "subscribeNow": {
+      "fields": ["*"]
+    },
+    "footer": {
+      "fields": ["*"],
+      "populate": {
+        "links": {
+          "fields": ["*"]
+        },
+        "contactUsEmail": {
+          "fields": ["*"]
+        },
+        "contactUsLocation": {
+          "fields": ["*"]
+        },
+        "contactUsPhoneNumber": {
+          "fields": ["*"]
+        }
+      }
+    }
+  }
+}

yoga-app/src/api/strapi/strapi-api.ts

@@ -4,6 +4,7 @@ import qs from "qs";
 import aboutQuery from "@/api/strapi/query/about.json";
 import homeQuery from "@/api/strapi/query/home.json";
 import servicesQuery from "@/api/strapi/query/services.json";
+import serviceQuery from "@/api/strapi/query/service.json";
 import pricesQuery from "@/api/strapi/query/prices.json";
 import faqQuery from "@/api/strapi/query/faq.json";
 import contactQuery from "@/api/strapi/query/contact.json";
@@ -14,6 +15,7 @@ import {PricesPage_Plain} from "@/types/generated-strapi-interfaces/api/prices-p
 import {FaqPage_Plain} from "@/types/generated-strapi-interfaces/api/faq-page";
 import {ContactPage_Plain} from "@/types/generated-strapi-interfaces/api/contact-page";
 import {YogaSingleService_Plain} from "@/types/generated-strapi-interfaces/api/yoga-single-service";
+import {ServicePage_Plain} from "@/types/generated-strapi-interfaces/api/service-page";
 
 
 class StrapiApi{
@@ -43,7 +45,11 @@ class StrapiApi{
         return this.getJson("/api/services-page?",servicesQuery);
     }
 
-    public getServicePage(name: string): Promise<YogaSingleService_Plain[]>{
+    public getServicePage(): Promise<ServicePage_Plain>{
+        return this.getJson("/api/service-page?",serviceQuery);
+    }
+
+    public getService(name: string): Promise<YogaSingleService_Plain[]>{
         return this.getJson("/api/yoga-single-services?", {
             filters: {
                 name: {

yoga-app/src/api/strapi/strapi-client.ts

@@ -14,6 +14,7 @@ class StrapiClient{
         return  '/image/'+ imagePath;
     }
     public async  httpGet(path: string){
+        console.info("httpGet", path);
         return await httpClient.httpGet(this.strapiUrl + path);
     }
     public async httpGetJson<T>(url: string): Promise<Payload<T>>{

yoga-app/src/app/services/[slug]/page.module.css

@@ -0,0 +1,3 @@
+.article h1{
+    color: black;
+}

yoga-app/src/app/services/[slug]/page.tsx

@@ -1,26 +1,59 @@
 import React from "react";
 import strapiApi from "@/api/strapi/strapi-api";
+import {BlocksContent} from "@strapi/blocks-react-renderer";
+import SubscribeComponent from "@/components/subscribe.component";
+import FooterComponent from "@/components/footer.component";
+import SubHeaderComponent from "@/components/subHeader.component";
+import AosComponent from "@/components/aos.component";
+import styles from './page.module.css'
+import NextBlocksRenderer from "@/components/next.blocks.renderer";
+import clsx from "clsx";
+
+const rewriteStrapiImageUrlToNextImageUrl = (content: BlocksContent) =>{
+    console.info("content", content);
+    for(const item of content){
+        if ( item.type == 'image'){
+            const imageData = item.image;
+            const url = new URL(imageData.url);
+            imageData.url = strapiApi.getImageUrl(url.pathname);
+        }
+    }
+    return content;
+}
+
 export default async function ServiceArticlePage({params}: {
-    params: { slug: string}
+    params: Promise<{ slug: string }>
 }) {
-    const servicesByName = await strapiApi.getServicePage(params.slug);
+    const {slug} = await params
-    // return (
+    const {footer, subscribeNow} = await strapiApi.getServicePage();
-    //     <>
+    const servicesByName = await strapiApi.getService(slug);
-    //         {header && description && <SubHeaderComponent header1={header} description={description} />}
+    const selectedService = servicesByName[0];
-    //         { ourServices && <OurServicesComponent  config={ourServices}  /> }
+    console.info("selectedService",selectedService);
-    //         { contactUs && <ContactUsComponent contactUs={contactUs} />}
+    const article: BlocksContent = rewriteStrapiImageUrlToNextImageUrl( selectedService.article);
-    //         { ourSpecialities && <OurSpecialitiesComponent config={ourSpecialities} /> }
+    console.info(article);
-    //         { feedbacks && <FeedbackComponent config={feedbacks} /> }
+
-    //         { blogs && <BlogPostsComponent config={blogs} /> }
+
-    //         { subscribe && <SubscribeComponent config={subscribe} /> }
+
-    //         { footer &&  <FooterComponent config={footer} /> }
-    //         <AosComponent />
-    //     </>
-    // );
-    console.info("slug", params.slug);
-    console.info("servicesByName", servicesByName);
     return (
-                <div>hello world {params.slug}</div>
+        <>
+            {selectedService && selectedService.header && selectedService.description &&
+                <SubHeaderComponent header1={selectedService.header} description={selectedService.description}/>}
+            <section className={clsx( styles.article, 'mb-3')}>
+                <div className="container">
+                    <div className={"row"}>
+                        <div className={"col-lg-12 col-md-12 col-sm-12 col-xs-12"}>
+                            <NextBlocksRenderer
+                                content={article as BlocksContent}
+                            />
+                        </div>
+                    </div>
+                </div>
+
+            </section>
+            {subscribeNow && <SubscribeComponent config={subscribeNow}/>}
+            {footer && <FooterComponent config={footer}/>}
+            <AosComponent/>
+        </>
     );
 }
 

yoga-app/src/components/next.blocks.renderer.tsx

@@ -0,0 +1,28 @@
+'use client';
+import {BlocksContent, BlocksRenderer} from "@strapi/blocks-react-renderer";
+import React from "react";
+import YogaImageComponent from "@/components/yoga.image.component";
+
+export interface Props{
+    content: BlocksContent;
+}
+const NextBlocksRenderer = ({ content }: Props) => {
+    return  (
+    <BlocksRenderer
+        content={content}
+        blocks={{
+            image: ({image}) => {
+                return (
+                    <YogaImageComponent
+                        src={image.url}
+                        // width={image.width}
+                        // height={image.height}
+                        alt={image.alternativeText || ""}
+                    />
+                );
+            }
+        }}
+        />);
+}
+
+export default NextBlocksRenderer;

yoga-app/src/types/generated-strapi-interfaces/api/article.ts

@@ -17,7 +17,7 @@ export interface Article {
     cover?: { data: Media };
     author?: { data: Author };
     category?: { data: Category };
-    blocks?: object;
+    blocks?: any;
   };
 }
 export interface Article_Plain {
@@ -28,7 +28,7 @@ export interface Article_Plain {
   cover?: Media_Plain;
   author?: Author_Plain;
   category?: Category_Plain;
-  blocks?: object;
+  blocks?: any;
 }
 
 export interface Article_NoRelations {
@@ -39,7 +39,7 @@ export interface Article_NoRelations {
   cover?: number;
   author?: number;
   category?: number;
-  blocks?: object;
+  blocks?: any;
 }
 
 export interface Article_AdminPanelLifeCycle {
@@ -50,5 +50,5 @@ export interface Article_AdminPanelLifeCycle {
   cover?: AdminPanelRelationPropertyModification<Media_Plain>;
   author?: AdminPanelRelationPropertyModification<Author_Plain>;
   category?: AdminPanelRelationPropertyModification<Category_Plain>;
-  blocks?: object;
+  blocks?: any;
 }

yoga-app/src/types/generated-strapi-interfaces/api/service-page.ts

@@ -0,0 +1,40 @@
+// Interface automatically generated by schemas-to-ts
+
+import { YogaSubscribeNowComponent } from './yoga-subscribe-now-component';
+import { YogaFooter } from './yoga-footer';
+import { YogaSubscribeNowComponent_Plain } from './yoga-subscribe-now-component';
+import { YogaFooter_Plain } from './yoga-footer';
+import { AdminPanelRelationPropertyModification } from '../common/AdminPanelRelationPropertyModification';
+
+export interface ServicePage {
+  id: number;
+  attributes: {
+    createdAt: Date;    updatedAt: Date;    publishedAt?: Date;    header?: string;
+    description?: string;
+    subscribeNow?: { data: YogaSubscribeNowComponent };
+    footer?: { data: YogaFooter };
+  };
+}
+export interface ServicePage_Plain {
+  id: number;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  header?: string;
+  description?: string;
+  subscribeNow?: YogaSubscribeNowComponent_Plain;
+  footer?: YogaFooter_Plain;
+}
+
+export interface ServicePage_NoRelations {
+  id: number;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  header?: string;
+  description?: string;
+  subscribeNow?: number;
+  footer?: number;
+}
+
+export interface ServicePage_AdminPanelLifeCycle {
+  id: number;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  header?: string;
+  description?: string;
+  subscribeNow?: AdminPanelRelationPropertyModification<YogaSubscribeNowComponent_Plain>;
+  footer?: AdminPanelRelationPropertyModification<YogaFooter_Plain>;
+}

yoga-app/src/types/generated-strapi-interfaces/api/yoga-single-service.ts

@@ -13,7 +13,7 @@ export interface YogaSingleService {
     image?: { data: Media };
     imageAlt?: string;
     name?: string;
-    article?: string;
+    article?: any;
     locale: string;
     localizations?: { data: YogaSingleService[] };
   };
@@ -26,7 +26,7 @@ export interface YogaSingleService_Plain {
   image?: Media_Plain;
   imageAlt?: string;
   name?: string;
-  article?: string;
+  article?: any;
   locale: string;
   localizations?: YogaSingleService_Plain[];
 }
@@ -39,7 +39,7 @@ export interface YogaSingleService_NoRelations {
   image?: number;
   imageAlt?: string;
   name?: string;
-  article?: string;
+  article?: any;
   locale: string;
   localizations?: YogaSingleService[];
 }
@@ -52,7 +52,7 @@ export interface YogaSingleService_AdminPanelLifeCycle {
   image?: AdminPanelRelationPropertyModification<Media_Plain>;
   imageAlt?: string;
   name?: string;
-  article?: string;
+  article?: any;
   locale: string;
   localizations?: YogaSingleService[];
 }

yoga-cms/generated-strapi-interfaces/api/service-page.ts

@@ -0,0 +1,40 @@
+// Interface automatically generated by schemas-to-ts
+
+import { YogaSubscribeNowComponent } from './yoga-subscribe-now-component';
+import { YogaFooter } from './yoga-footer';
+import { YogaSubscribeNowComponent_Plain } from './yoga-subscribe-now-component';
+import { YogaFooter_Plain } from './yoga-footer';
+import { AdminPanelRelationPropertyModification } from '../common/AdminPanelRelationPropertyModification';
+
+export interface ServicePage {
+  id: number;
+  attributes: {
+    createdAt: Date;    updatedAt: Date;    publishedAt?: Date;    header?: string;
+    description?: string;
+    subscribeNow?: { data: YogaSubscribeNowComponent };
+    footer?: { data: YogaFooter };
+  };
+}
+export interface ServicePage_Plain {
+  id: number;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  header?: string;
+  description?: string;
+  subscribeNow?: YogaSubscribeNowComponent_Plain;
+  footer?: YogaFooter_Plain;
+}
+
+export interface ServicePage_NoRelations {
+  id: number;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  header?: string;
+  description?: string;
+  subscribeNow?: number;
+  footer?: number;
+}
+
+export interface ServicePage_AdminPanelLifeCycle {
+  id: number;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  header?: string;
+  description?: string;
+  subscribeNow?: AdminPanelRelationPropertyModification<YogaSubscribeNowComponent_Plain>;
+  footer?: AdminPanelRelationPropertyModification<YogaFooter_Plain>;
+}

yoga-cms/generated-strapi-interfaces/api/yoga-single-service.ts

@@ -13,7 +13,7 @@ export interface YogaSingleService {
     image?: { data: Media };
     imageAlt?: string;
     name?: string;
-    article?: string;
+    article?: any;
     locale: string;
     localizations?: { data: YogaSingleService[] };
   };
@@ -26,7 +26,7 @@ export interface YogaSingleService_Plain {
   image?: Media_Plain;
   imageAlt?: string;
   name?: string;
-  article?: string;
+  article?: any;
   locale: string;
   localizations?: YogaSingleService_Plain[];
 }
@@ -39,7 +39,7 @@ export interface YogaSingleService_NoRelations {
   image?: number;
   imageAlt?: string;
   name?: string;
-  article?: string;
+  article?: any;
   locale: string;
   localizations?: YogaSingleService[];
 }
@@ -52,7 +52,7 @@ export interface YogaSingleService_AdminPanelLifeCycle {
   image?: AdminPanelRelationPropertyModification<Media_Plain>;
   imageAlt?: string;
   name?: string;
-  article?: string;
+  article?: any;
   locale: string;
   localizations?: YogaSingleService[];
 }

yoga-cms/src/api/service-page/content-types/service-page/schema.json

@@ -0,0 +1,31 @@
+{
+  "kind": "singleType",
+  "collectionName": "service_pages",
+  "info": {
+    "singularName": "service-page",
+    "pluralName": "service-pages",
+    "displayName": "ServicePage",
+    "description": ""
+  },
+  "options": {
+    "draftAndPublish": true
+  },
+  "attributes": {
+    "header": {
+      "type": "string"
+    },
+    "description": {
+      "type": "text"
+    },
+    "subscribeNow": {
+      "type": "relation",
+      "relation": "oneToOne",
+      "target": "api::yoga-subscribe-now-component.yoga-subscribe-now-component"
+    },
+    "footer": {
+      "type": "relation",
+      "relation": "oneToOne",
+      "target": "api::yoga-footer.yoga-footer"
+    }
+  }
+}

yoga-cms/src/api/service-page/controllers/service-page.ts

@@ -0,0 +1,7 @@
+/**
+ * service-page controller
+ */
+
+import { factories } from '@strapi/strapi'
+
+export default factories.createCoreController('api::service-page.service-page');

yoga-cms/src/api/service-page/routes/service-page.ts

@@ -0,0 +1,7 @@
+/**
+ * service-page router
+ */
+
+import { factories } from '@strapi/strapi';
+
+export default factories.createCoreRouter('api::service-page.service-page');

yoga-cms/src/api/service-page/services/service-page.ts

@@ -0,0 +1,7 @@
+/**
+ * service-page service
+ */
+
+import { factories } from '@strapi/strapi';
+
+export default factories.createCoreService('api::service-page.service-page');

yoga-cms/src/api/yoga-single-service/content-types/yoga-single-service/schema.json

@@ -73,12 +73,7 @@
       "type": "string"
     },
     "article": {
-      "pluginOptions": {
+      "type": "blocks"
-        "i18n": {
-          "localized": true
-        }
-      },
-      "type": "richtext"
     }
   }
 }

yoga-cms/types/generated/contentTypes.d.ts

@@ -849,6 +849,44 @@ export interface ApiPricesPagePricesPage extends Struct.SingleTypeSchema {
   };
 }
 
+export interface ApiServicePageServicePage extends Struct.SingleTypeSchema {
+  collectionName: 'service_pages';
+  info: {
+    description: '';
+    displayName: 'ServicePage';
+    pluralName: 'service-pages';
+    singularName: 'service-page';
+  };
+  options: {
+    draftAndPublish: true;
+  };
+  attributes: {
+    createdAt: Schema.Attribute.DateTime;
+    createdBy: Schema.Attribute.Relation<'oneToOne', 'admin::user'> &
+      Schema.Attribute.Private;
+    description: Schema.Attribute.Text;
+    footer: Schema.Attribute.Relation<
+      'oneToOne',
+      'api::yoga-footer.yoga-footer'
+    >;
+    header: Schema.Attribute.String;
+    locale: Schema.Attribute.String & Schema.Attribute.Private;
+    localizations: Schema.Attribute.Relation<
+      'oneToMany',
+      'api::service-page.service-page'
+    > &
+      Schema.Attribute.Private;
+    publishedAt: Schema.Attribute.DateTime;
+    subscribeNow: Schema.Attribute.Relation<
+      'oneToOne',
+      'api::yoga-subscribe-now-component.yoga-subscribe-now-component'
+    >;
+    updatedAt: Schema.Attribute.DateTime;
+    updatedBy: Schema.Attribute.Relation<'oneToOne', 'admin::user'> &
+      Schema.Attribute.Private;
+  };
+}
+
 export interface ApiServicesPageServicesPage extends Struct.SingleTypeSchema {
   collectionName: 'services_pages';
   info: {
@@ -1694,12 +1732,7 @@ export interface ApiYogaSingleServiceYogaSingleService
     };
   };
   attributes: {
-    article: Schema.Attribute.RichText &
+    article: Schema.Attribute.Blocks;
-      Schema.Attribute.SetPluginOptions<{
-        i18n: {
-          localized: true;
-        };
-      }>;
     buttonLink: Schema.Attribute.String &
       Schema.Attribute.SetPluginOptions<{
         i18n: {
@@ -2511,6 +2544,7 @@ declare module '@strapi/strapi' {
       'api::page.page': ApiPagePage;
       'api::person.person': ApiPersonPerson;
       'api::prices-page.prices-page': ApiPricesPagePricesPage;
+      'api::service-page.service-page': ApiServicePageServicePage;
       'api::services-page.services-page': ApiServicesPageServicesPage;
       'api::yoga-about-us-component.yoga-about-us-component': ApiYogaAboutUsComponentYogaAboutUsComponent;
       'api::yoga-about-us-with-boxes-component.yoga-about-us-with-boxes-component': ApiYogaAboutUsWithBoxesComponentYogaAboutUsWithBoxesComponent;