add service detail page

dev.sh

@@ -1,5 +0,0 @@
-#!/usr/bin/env bash
-
-cd environment/dev/docker-compose/yogastic
-docker compose up -d
-

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

@@ -1,44 +1,29 @@
 import React from "react";
 import strapiApi from "@/api/strapi/strapi-api";
-import {BlocksContent} from "@strapi/blocks-react-renderer";
+import {BlocksContent, BlocksRenderer} 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: Promise<{ slug: string }>
 }) {
     const {slug} = await params
-    const {footer, subscribeNow} = await strapiApi.getServicePage();
+    const {header, description, footer, subscribeNow} = await strapiApi.getServicePage();
     const servicesByName = await strapiApi.getService(slug);
     const selectedService = servicesByName[0];
-    console.info("selectedService",selectedService);
+    const article = selectedService.article;
-    const article: BlocksContent = rewriteStrapiImageUrlToNextImageUrl( selectedService.article);
     console.info(article);
 
-
+    selectedService.article
-
     return (
         <>
             {selectedService && selectedService.header && selectedService.description &&
                 <SubHeaderComponent header1={selectedService.header} description={selectedService.description}/>}
-            <section className={clsx( styles.article, 'mb-3')}>
+            <section className={styles.article}>
                 <div className="container">
                     <div className={"row"}>
                         <div className={"col-lg-12 col-md-12 col-sm-12 col-xs-12"}>

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

@@ -1,5 +1,6 @@
 'use client';
 import {BlocksContent, BlocksRenderer} from "@strapi/blocks-react-renderer";
+import strapiApi from "@/api/strapi/strapi-api";
 import React from "react";
 import YogaImageComponent from "@/components/yoga.image.component";
 
@@ -12,11 +13,13 @@ const NextBlocksRenderer = ({ content }: Props) => {
         content={content}
         blocks={{
             image: ({image}) => {
+                console.log(image);
+                const url =  new URL(image.url);
                 return (
                     <YogaImageComponent
-                        src={image.url}
+                        src={url.pathname}
-                        // width={image.width}
+                        width={image.width}
-                        // height={image.height}
+                        height={image.height}
                         alt={image.alternativeText || ""}
                     />
                 );

yoga-app/src/components/price.item.component.tsx

@@ -7,7 +7,7 @@ export interface Props{
     config: YogaPrice_Plain
 }
 
-export function PriceItemComponent({config: {header, description, option1,option2,price,pricePostfix, icon, image,buttonText}} : Props){
+export function PriceItemComponent({config: {header,option1,option2,price,icon, image,buttonText}} : Props){
     // there are some issues with the strapi generated types
     const iconFile: StrapiFile = icon as StrapiFile;
     const imageFile: StrapiFile = image as StrapiFile;
@@ -28,7 +28,6 @@ export function PriceItemComponent({config: {header, description, option1,option
                 </div>
                 <div className="pricing_plans_box_lower_portion">
                     <h3>{header}</h3>
-                    <p className={'text-center'}>{description}</p>
                     <ul className="list-unstyled">
                         <li>
                             <i className="fa-solid fa-check" aria-hidden="true"></i>{option1}
@@ -39,7 +38,7 @@ export function PriceItemComponent({config: {header, description, option1,option
                     </ul>
                     <div className="pricing_plans_span_wrapper">
                         <span className="price">{price} FT</span>
-                        { pricePostfix && <span className="per_month">{pricePostfix}</span> }
+                        <span className="per_month">/per month</span>
                     </div>
                     <div className="btn_wrapper">
                         <a className="enroll_now_btn text-decoration-none" href="/pricing.html">{buttonText}</a>

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

@@ -14,8 +14,6 @@ export interface YogaPrice {
     price?: number;
     icon?: { data: Media };
     image?: { data: Media };
-    pricePostfix?: string;
-    description?: string;
   };
 }
 export interface YogaPrice_Plain {
@@ -27,8 +25,6 @@ export interface YogaPrice_Plain {
   price?: number;
   icon?: Media_Plain;
   image?: Media_Plain;
-  pricePostfix?: string;
-  description?: string;
 }
 
 export interface YogaPrice_NoRelations {
@@ -40,8 +36,6 @@ export interface YogaPrice_NoRelations {
   price?: number;
   icon?: number;
   image?: number;
-  pricePostfix?: string;
-  description?: string;
 }
 
 export interface YogaPrice_AdminPanelLifeCycle {
@@ -53,6 +47,4 @@ export interface YogaPrice_AdminPanelLifeCycle {
   price?: number;
   icon?: AdminPanelRelationPropertyModification<Media_Plain>;
   image?: AdminPanelRelationPropertyModification<Media_Plain>;
-  pricePostfix?: string;
-  description?: string;
 }

yoga-cms/generated-strapi-interfaces/api/yoga-price.ts

@@ -14,8 +14,6 @@ export interface YogaPrice {
     price?: number;
     icon?: { data: Media };
     image?: { data: Media };
-    pricePostfix?: string;
-    description?: string;
   };
 }
 export interface YogaPrice_Plain {
@@ -27,8 +25,6 @@ export interface YogaPrice_Plain {
   price?: number;
   icon?: Media_Plain;
   image?: Media_Plain;
-  pricePostfix?: string;
-  description?: string;
 }
 
 export interface YogaPrice_NoRelations {
@@ -40,8 +36,6 @@ export interface YogaPrice_NoRelations {
   price?: number;
   icon?: number;
   image?: number;
-  pricePostfix?: string;
-  description?: string;
 }
 
 export interface YogaPrice_AdminPanelLifeCycle {
@@ -53,6 +47,4 @@ export interface YogaPrice_AdminPanelLifeCycle {
   price?: number;
   icon?: AdminPanelRelationPropertyModification<Media_Plain>;
   image?: AdminPanelRelationPropertyModification<Media_Plain>;
-  pricePostfix?: string;
-  description?: string;
 }

yoga-cms/src/api/yoga-price/content-types/yoga-price/schema.json

@@ -4,8 +4,7 @@
   "info": {
     "singularName": "yoga-price",
     "pluralName": "yoga-prices",
-    "displayName": "YogaPrice",
+    "displayName": "YogaPrice"
-    "description": ""
   },
   "options": {
     "draftAndPublish": true
@@ -28,32 +27,24 @@
       "type": "integer"
     },
     "icon": {
-      "type": "media",
-      "multiple": false,
-      "required": false,
       "allowedTypes": [
         "images",
         "files",
         "videos",
         "audios"
-      ]
+      ],
+      "type": "media",
+      "multiple": false
     },
     "image": {
-      "type": "media",
-      "multiple": false,
-      "required": false,
       "allowedTypes": [
         "images",
         "files",
         "videos",
         "audios"
-      ]
+      ],
-    },
+      "type": "media",
-    "pricePostfix": {
+      "multiple": false
-      "type": "string"
-    },
-    "description": {
-      "type": "text"
     }
   }
 }

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

@@ -1680,7 +1680,6 @@ export interface ApiYogaPriceComponentYogaPriceComponent
 export interface ApiYogaPriceYogaPrice extends Struct.CollectionTypeSchema {
   collectionName: 'yoga_prices';
   info: {
-    description: '';
     displayName: 'YogaPrice';
     pluralName: 'yoga-prices';
     singularName: 'yoga-price';
@@ -1693,7 +1692,6 @@ export interface ApiYogaPriceYogaPrice extends Struct.CollectionTypeSchema {
     createdAt: Schema.Attribute.DateTime;
     createdBy: Schema.Attribute.Relation<'oneToOne', 'admin::user'> &
       Schema.Attribute.Private;
-    description: Schema.Attribute.Text;
     header: Schema.Attribute.String;
     icon: Schema.Attribute.Media<'images' | 'files' | 'videos' | 'audios'>;
     image: Schema.Attribute.Media<'images' | 'files' | 'videos' | 'audios'>;
@@ -1706,7 +1704,6 @@ export interface ApiYogaPriceYogaPrice extends Struct.CollectionTypeSchema {
     option1: Schema.Attribute.String;
     option2: Schema.Attribute.String;
     price: Schema.Attribute.Integer;
-    pricePostfix: Schema.Attribute.String;
     publishedAt: Schema.Attribute.DateTime;
     updatedAt: Schema.Attribute.DateTime;
     updatedBy: Schema.Attribute.Relation<'oneToOne', 'admin::user'> &