add service detail page

api.http

@@ -26,4 +26,8 @@ Accept: application/json
 
 ### GET request with a header
 GET {{domain}}/api/yoga-single-services?filters[name][$eq]=service4
-Accept: application/json
+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": {
+    "subscribe": {
+      "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/app/services/[slug]/page.tsx

@@ -1,9 +1,12 @@
 import React from "react";
 import strapiApi from "@/api/strapi/strapi-api";
+import {BlocksContent, BlocksRenderer} from "@strapi/blocks-react-renderer";
 export default async function ServiceArticlePage({params}: {
-    params: { slug: string}
+    params: Promise<{ slug: string}>
 } ) {
-    const servicesByName = await strapiApi.getServicePage(params.slug);
+    const {slug} = await params
+    const {footer= undefined, subscribeNow = undefined} = await strapiApi.getServicePage();
+    const servicesByName = await strapiApi.getService(slug);
     // return (
     //     <>
     //         {header && description && <SubHeaderComponent header1={header} description={description} />}
@@ -17,10 +20,19 @@ export default async function ServiceArticlePage({params}: {
     //         <AosComponent />
     //     </>
     // );
-    console.info("slug", params.slug);
+    console.info("slug", slug);
     console.info("servicesByName", servicesByName);
+    const selectedService = servicesByName[0];
+    const article = selectedService.article;
+    console.info("article", article);
+
+    selectedService.article
             return (
-                <div>hello world {params.slug}</div>
+                <>
+                    <BlocksRenderer content={article as BlocksContent} />
+                    { subscribeNow && <SubscribeComponent config={subscribeNow} /> }
+                    { footer &&  <FooterComponent config={footer} /> }
+                </>
             );
 }
 

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/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/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/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;