Merge pull request #113 from strapi/feature/add-more-fr-localisation

fix: fully translatable LaunchPad

Author: Baldinof

README.md

@@ -93,12 +93,6 @@ Visit http://localhost:1337/admin to create your first Strapi user, and http://l
 
 [Docs](https://docs.strapi.io) • [Discord](https://discord.strapi.io) • [YouTube](https://www.youtube.com/c/Strapi/featured) • [Strapi Design System](https://design-system.strapi.io/) • [Marketplace](https://market.strapi.io/) • [Cloud Free Trial](https://cloud.strapi.io)
 
-## Todo
-
-- [ ] Implement the official Strapi SEO plugin
-- [ ] Create localized content for the pricing plans and products
-- [ ] Populate creator fields when it'll work on Strapi 5 (article authors information are missing)
-
 ## Customization
 
 - The Strapi application contains a custom population middlewares in every api route.

next/app/[locale]/(marketing)/blog/[slug]/page.tsx

@@ -16,6 +16,7 @@ export default async function SingleArticlePage({
         $eq: slug,
       },
     },
+    locale,
   });
 
   if (!article) {

next/app/[locale]/(marketing)/blog/page.tsx

@@ -67,7 +67,7 @@ export default async function Blog({ params }: LocaleParamsProps) {
           key={firstArticle.title}
         />
 
-        <BlogPostRows articles={articles} />
+        <BlogPostRows articles={articles} locale={locale} />
       </Container>
     </div>
   );

next/app/[locale]/(marketing)/products/[slug]/page.tsx

@@ -2,20 +2,22 @@ import { Metadata } from 'next';
 import { redirect } from 'next/navigation';
 
 import { Container } from '@/components/container';
+import ClientSlugHandler from '../../ClientSlugHandler';
 import { AmbientColor } from '@/components/decorations/ambient-color';
 import DynamicZoneManager from '@/components/dynamic-zone/manager';
 import { SingleProduct } from '@/components/products/single-product';
 import { generateMetadataObject } from '@/lib/shared/metadata';
-import { fetchCollectionType } from '@/lib/strapi';
+import { fetchCollectionType, fetchSingleType } from '@/lib/strapi';
 import type { LocaleSlugParamsProps, Product } from '@/types/types';
 
 export async function generateMetadata({
   params,
 }: LocaleSlugParamsProps): Promise<Metadata> {
-  const { slug } = await params;
+  const { slug, locale } = await params;
 
   const [pageData] = await fetchCollectionType<Product[]>('products', {
     filters: { slug: { $eq: slug } },
+    locale,
   });
 
   const seo = pageData;
@@ -30,17 +32,34 @@ export default async function SingleProductPage({
 
   const [pageData] = await fetchCollectionType<Product[]>('products', {
     filters: { slug: { $eq: slug } },
+    locale,
   });
 
+  const globalData = await fetchSingleType('global', { locale });
+
   if (!pageData) {
     redirect('/products');
   }
 
+  const localizedSlugs = pageData.localizations?.reduce(
+    (acc: Record<string, string>, localization: any) => {
+      acc[localization.locale] = localization.slug;
+      return acc;
+    },
+    { [locale]: slug }
+  ) || {};
+
   return (
     <div className="relative overflow-hidden w-full">
+      <ClientSlugHandler localizedSlugs={localizedSlugs} />
       <AmbientColor />
       <Container className="py-20 md:py-40">
-        <SingleProduct product={pageData} />
+        <SingleProduct
+          product={pageData}
+          locale={locale}
+          addToCartText={globalData.add_to_cart}
+          buyNowText={globalData.buy_now}
+        />
         {pageData?.dynamic_zone && (
           <DynamicZoneManager
             dynamicZone={pageData?.dynamic_zone}

next/app/[locale]/(marketing)/products/page.tsx

@@ -29,7 +29,7 @@ export default async function Products({ params }: LocaleParamsProps) {
 
   // Fetch the product-page and products data
   const pageData = await fetchSingleType('product-page', { locale });
-  const products = await fetchCollectionType<Product[]>('products');
+  const products = await fetchCollectionType<Product[]>('products', { locale });
 
   const localizedSlugs = pageData.localizations.reduce(
     (acc: Record<string, string>, localization: any) => {
@@ -56,8 +56,18 @@ export default async function Products({ params }: LocaleParamsProps) {
         <Subheading className="max-w-3xl mx-auto">
           {pageData.sub_heading}
         </Subheading>
-        <Featured products={featured} locale={locale} />
-        <ProductItems products={products} locale={locale} />
+        <Featured
+          products={featured}
+          locale={locale}
+          heading={pageData.featured_heading}
+          sub_heading={pageData.featured_sub_heading}
+        />
+        <ProductItems
+          products={products}
+          locale={locale}
+          heading={pageData.popular_heading}
+          sub_heading={pageData.popular_sub_heading}
+        />
       </Container>
     </div>
   );

next/components/blog-post-rows.tsx

@@ -8,7 +8,13 @@ import React, { useEffect, useState } from 'react';
 import { truncate } from '@/lib/utils';
 import { Article } from '@/types/types';
 
-export const BlogPostRows = ({ articles }: { articles: Article[] }) => {
+export const BlogPostRows = ({
+  articles,
+  locale,
+}: {
+  articles: Article[];
+  locale: string;
+}) => {
   const [search, setSearch] = useState('');
 
   const searcher = new FuzzySearch(articles, ['title'], {
@@ -40,18 +46,28 @@ export const BlogPostRows = ({ articles }: { articles: Article[] }) => {
           <p className="text-neutral-400 text-center p-4">No results found</p>
         ) : (
           results.map((article, index) => (
-            <BlogPostRow article={article} key={article.slug + index} />
+            <BlogPostRow
+              article={article}
+              key={article.slug + index}
+              locale={locale}
+            />
           ))
         )}
       </div>
     </div>
   );
 };
 
-export const BlogPostRow = ({ article }: { article: Article }) => {
+export const BlogPostRow = ({
+  article,
+  locale,
+}: {
+  article: Article;
+  locale: string;
+}) => {
   return (
     <Link
-      href={`blog/${article.slug}`}
+      href={`/${locale}/blog/${article.slug}`}
       key={`${article.slug}`}
       className="flex md:flex-row flex-col items-start justify-between md:items-center group py-4"
     >

next/components/dynamic-zone/pricing.tsx

@@ -27,16 +27,36 @@ type Plan = {
   number: string;
   featured?: boolean;
   CTA?: CTA | undefined;
+  localizations?: Plan[];
+  locale?: string;
+};
+
+// Helper to ensure the plan object has the correct shape if needed
+const normalizePlan = (plan: any): Plan => {
+  return plan as Plan;
+};
+
+const translations = {
+  en: {
+    currency: '$',
+    featured: 'Featured',
+  },
+  fr: {
+    currency: '€',
+    featured: 'En vedette',
+  },
 };
 
 export const Pricing = ({
   heading,
   sub_heading,
   plans,
+  locale = 'en',
 }: {
   heading: string;
   sub_heading: string;
   plans: any[];
+  locale?: string;
 }) => {
   const onClick = (plan: Plan) => {
     console.log('click', plan);
@@ -51,95 +71,123 @@ export const Pricing = ({
         <Subheading className="max-w-3xl mx-auto">{sub_heading}</Subheading>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 max-w-7xl mx-auto gap-4 py-20 lg:items-start">
           {plans.map((plan) => (
-            <Card onClick={() => onClick(plan)} key={plan.name} plan={plan} />
+            <Card
+              onClick={onClick}
+              key={plan.name}
+              plan={plan}
+              locale={locale}
+            />
           ))}
         </div>
       </Container>
     </div>
   );
 };
 
-const Card = ({ plan, onClick }: { plan: Plan; onClick: () => void }) => {
+const Card = ({
+  plan,
+  onClick,
+  locale,
+}: {
+  plan: Plan;
+  onClick: (plan: Plan) => void;
+  locale: string;
+}) => {
+  const t = translations[locale as keyof typeof translations] || translations.en;
+
+  // Try to find the plan content that matches the current locale
+  // This handles cases where the page links to the English plan but a French version exists
+  let displayPlan = plan;
+  if (plan.localizations && plan.localizations.length > 0) {
+    const localizedPlan = plan.localizations.find((p) => p.locale === locale);
+    if (localizedPlan) {
+      displayPlan = normalizePlan(localizedPlan); // helper to ensure shape matches if needed, but assuming same shape
+    }
+  }
+
+  // Ensure perks are also localized if the plan didn't switch or if structure is different
+  // Assuming localizedPlan has its own perks.
+
   return (
     <div
       className={cn(
         'p-4 md:p-4 rounded-3xl bg-neutral-900 border-2 border-neutral-800',
-        plan.featured && 'border-neutral-50 bg-neutral-100'
+        displayPlan.featured && 'border-neutral-50 bg-neutral-100'
       )}
     >
       <div
         className={cn(
           'p-4 bg-neutral-800 rounded-2xl shadow-[0px_-1px_0px_0px_var(--neutral-700)]',
-          plan.featured && 'bg-white shadow-aceternity'
+          displayPlan.featured && 'bg-white shadow-aceternity'
         )}
       >
         <div className="flex justify-between items-center">
-          <p className={cn('font-medium', plan.featured && 'text-black')}>
-            {plan.name}
+          <p className={cn('font-medium', displayPlan.featured && 'text-black')}>
+            {displayPlan.name}
           </p>
-          {plan.featured && (
+          {displayPlan.featured && (
             <div
               className={cn(
                 'font-medium text-xs px-3 py-1 rounded-full relative bg-neutral-900'
               )}
             >
               <div className="absolute inset-x-0 bottom-0 w-3/4 mx-auto h-px bg-gradient-to-r from-transparent via-indigo-500 to-transparent"></div>
-              Featured
+              {t.featured}
             </div>
           )}
         </div>
-        <div className="mt-8">
-          {plan.price && (
+        <div className="mt-8 flex items-baseline">
+          {displayPlan.price && (
             <span
               className={cn(
                 'text-lg font-bold text-neutral-500',
-                plan.featured && 'text-neutral-700'
+                displayPlan.featured && 'text-neutral-700'
               )}
             >
-              $
+              {t.currency}
             </span>
           )}
           <span
-            className={cn('text-4xl font-bold', plan.featured && 'text-black')}
+            className={cn('text-4xl font-bold', displayPlan.featured && 'text-black')}
           >
-            {plan.price || plan?.CTA?.text}
+            {displayPlan.price || displayPlan?.CTA?.text}
           </span>
-          {plan.price && (
+          {displayPlan.price && (
             <span
               className={cn(
                 'text-lg font-normal text-neutral-500 ml-2',
-                plan.featured && 'text-neutral-700'
+                displayPlan.featured && 'text-neutral-700'
               )}
             >
-              / launch
+              launch
             </span>
           )}
         </div>
         <Button
           variant="outline"
           className={cn(
             'w-full mt-10 mb-4',
-            plan.featured &&
-              'bg-black text-white hover:bg-black/80 hover:text-white'
+            displayPlan.featured &&
+            'bg-black text-white hover:bg-black/80 hover:text-white'
           )}
-          onClick={onClick}
+          onClick={() => onClick(displayPlan)}
         >
-          {plan?.CTA?.text}
+          {displayPlan?.CTA?.text}
         </Button>
       </div>
       <div className="mt-1 p-4">
-        {plan.perks.map((feature, idx) => (
-          <Step featured={plan.featured} key={idx}>
+        {displayPlan.perks.map((feature, idx) => (
+          <Step featured={displayPlan.featured} key={idx}>
             {feature.text}
           </Step>
         ))}
       </div>
-      {plan.additional_perks && plan.additional_perks.length > 0 && (
-        <Divider featured={plan.featured} />
+      {displayPlan.additional_perks && displayPlan.additional_perks.length > 0 && (
+        <Divider featured={displayPlan.featured} />
       )}
       <div className="p-4">
-        {plan.additional_perks?.map((feature, idx) => (
-          <Step featured={plan.featured} additional key={idx}>
+        {displayPlan.additional_perks?.map((feature, idx) => (
+          <Step featured={displayPlan.featured} additional key={idx}>
             {feature.text}
           </Step>
         ))}
@@ -148,6 +196,7 @@ const Card = ({ plan, onClick }: { plan: Plan; onClick: () => void }) => {
   );
 };
 
+
 const Step = ({
   children,
   additional,

next/components/locale-switcher.tsx

@@ -37,21 +37,20 @@ export function LocaleSwitcher({ currentLocale }: { currentLocale: string }) {
 
   return (
     <div className="flex gap-2 p-1 rounded-md">
-      {!pathname.includes('/products/') &&
-        Object.keys(localizedSlugs).map((locale) => (
-          <Link key={locale} href={generateLocalizedPath(locale)}>
-            <div
-              className={cn(
-                'flex cursor-pointer items-center justify-center text-sm leading-[110%] w-8 py-1 rounded-md hover:bg-neutral-800 hover:text-white/80 text-white hover:shadow-[0px_1px_0px_0px_var(--neutral-600)_inset] transition duration-200',
-                locale === currentLocale
-                  ? 'bg-neutral-800 text-white shadow-[0px_1px_0px_0px_var(--neutral-600)_inset]'
-                  : ''
-              )}
-            >
-              {locale}
-            </div>
-          </Link>
-        ))}
+      {Object.keys(localizedSlugs).map((locale) => (
+        <Link key={locale} href={generateLocalizedPath(locale)}>
+          <div
+            className={cn(
+              'flex cursor-pointer items-center justify-center text-sm leading-[110%] w-8 py-1 rounded-md hover:bg-neutral-800 hover:text-white/80 text-white hover:shadow-[0px_1px_0px_0px_var(--neutral-600)_inset] transition duration-200',
+              locale === currentLocale
+                ? 'bg-neutral-800 text-white shadow-[0px_1px_0px_0px_var(--neutral-600)_inset]'
+                : ''
+            )}
+          >
+            {locale}
+          </div>
+        </Link>
+      ))}
     </div>
   );
 }