Add eight-language countertop noodle cooker selection (#183)

Author: youngminghuang-del

scripts/generate-static-pages.ts

@@ -42,10 +42,10 @@ import InductionCookingContent, { type InductionLocale } from '../src/features/c
 import ChineseCookingContent from '../src/features/commercial-kitchen/ChineseCookingContent';
 import { hotCookingPath } from '../src/features/commercial-kitchen/routes.mjs';
 import { inductionPage, getInductionPage, inductionPageSchema, zhHotCookingPage, chineseCookingSchema } from '../src/features/commercial-kitchen/data/inductionPage.mjs';
-import SteamCabinetContent from '../src/features/commercial-kitchen/SteamCabinetContent';
-import { getSteamCabinetPage, steamCabinetSchema } from '../src/features/commercial-kitchen/data/steamCabinetPage.mjs';
-import { steamCabinetPath } from '../src/features/commercial-kitchen/routes.mjs';
-const steamCabinetRelPath = steamCabinetPath.slice(1);
+import CookingSelectionContent from '../src/features/commercial-kitchen/CookingSelectionContent';
+import { cookingSelectionGroup, getCookingSelectionPage, cookingSelectionSchema } from '../src/features/commercial-kitchen/data/cookingSelectionPages.mjs';
+import { steamCabinetPath, noodleCookerPath } from '../src/features/commercial-kitchen/routes.mjs';
+const cookingSelectionRelPaths = [steamCabinetPath, noodleCookerPath].map(path => path.slice(1));
 const inductionRelPath = inductionPage.path.slice(1, -1);
 const hotCookingRelPath = hotCookingPath.slice(1);
 import RefrigerationModelCatalogue from '../src/features/refrigeration/RefrigerationModelCatalogue';
@@ -1793,15 +1793,15 @@ function injectStaticRouteContent(
       renderToStaticMarkup(createElement(CatalogueHeroMedia, {src:'/commercial-kitchen-media/kitchen-hero.webp',
         alt:'Commercial kitchen application',scene:true,items:kitchenHeroItems})));
     htmlContent = htmlContent.replace(/<script id="schema-jsonld-static-page"[^>]*>[\s\S]*?<\/script>/, `<script id="schema-jsonld-static-page" type="application/ld+json">${JSON.stringify(kitchenStructuredData(kitchenLaunch)).replace(/</g, '\\u003c')}</script>`);
-  } else if (relPath === inductionRelPath || relPath === hotCookingRelPath || relPath === steamCabinetRelPath) {
+  } else if (relPath === inductionRelPath || relPath === hotCookingRelPath || cookingSelectionRelPaths.includes(relPath)) {
     const hotCooking = relPath === hotCookingRelPath;
-    const steamCabinet = relPath === steamCabinetRelPath;
+    const selectionGroup = cookingSelectionGroup('/' + relPath);
     const locale = (lang === 'zh-cn' ? 'zh' : lang) as InductionLocale;
     staticBody = hotCooking
       ? renderToStaticMarkup(createElement(ChineseCookingContent, { page: zhHotCookingPage }))
-      : steamCabinet ? renderToStaticMarkup(createElement(SteamCabinetContent, { locale }))
+      : selectionGroup ? renderToStaticMarkup(createElement(CookingSelectionContent, { group: selectionGroup, locale }))
         : renderToStaticMarkup(createElement(InductionCookingContent, { locale }));
-    const schema = JSON.stringify(hotCooking ? chineseCookingSchema(zhHotCookingPage) : steamCabinet ? steamCabinetSchema(locale) : inductionPageSchema(locale)).replace(/</g, '\\u003c');
+    const schema = JSON.stringify(hotCooking ? chineseCookingSchema(zhHotCookingPage) : selectionGroup ? cookingSelectionSchema(selectionGroup, locale) : inductionPageSchema(locale)).replace(/</g, '\\u003c');
     htmlContent = htmlContent.replace(/<script id="schema-jsonld-static-page"[^>]*>[\s\S]*?<\/script>/g, '');
     htmlContent = htmlContent.replace('</head>', `<script id="schema-jsonld-static-page" type="application/ld+json">${schema}</script></head>`);
   } else if (kitchenCategories.some(category => category.path === `/${relPath}/`)) {
@@ -1964,7 +1964,7 @@ function run() {
     ...mobilePages.map(page => ({path:page.path.slice(1),priority:'0.9',changefreq:'monthly',languages:[...overviewLanguages]})),
     ...['screen-protectors','screen-protectors/compare'].map(path => ({ path, priority: '0.8', changefreq: 'monthly', languages: overviewLanguages.filter(l=>l!=='en') })),
     ...buyerGuides.map(guide => ({ path: guide.path.slice(1), priority: '0.8', changefreq: 'monthly', languages: overviewLanguages })),
-    { path: steamCabinetRelPath, priority: '0.8', changefreq: 'monthly', languages: overviewLanguages },
+    ...cookingSelectionRelPaths.map(path => ({ path, priority: '0.8', changefreq: 'monthly', languages: overviewLanguages })),
     { path: inductionRelPath, priority: '0.8', changefreq: 'monthly', languages: overviewLanguages },
     { path: hotCookingRelPath, priority: '0.8', changefreq: 'monthly', languages: ['zh-cn'] },
     ...kitchenCategories.map(category => ({ path: category.path.replace(/^\/|\/$/g, ''), priority: '0.8', changefreq: 'monthly', languages: overviewLanguages })),
@@ -2088,8 +2088,9 @@ function run() {
         const meta = buyerMeta(buyerGuide, lang);
         seo = { title: meta.title, desc: meta.description, keywords: '', image: meta.image };
       }
-      if (entry.path === inductionRelPath || entry.path === hotCookingRelPath || entry.path === steamCabinetRelPath) {
-        const page = entry.path === hotCookingRelPath ? zhHotCookingPage : entry.path === steamCabinetRelPath ? getSteamCabinetPage(lang) : getInductionPage(lang);
+      if (entry.path === inductionRelPath || entry.path === hotCookingRelPath || cookingSelectionRelPaths.includes(entry.path)) {
+        const selectionGroup = cookingSelectionGroup('/' + entry.path);
+        const page = entry.path === hotCookingRelPath ? zhHotCookingPage : selectionGroup ? getCookingSelectionPage(selectionGroup, lang) : getInductionPage(lang);
         seo = { title: page.title, desc: page.description, keywords: '', image: page.image };
       }
       const equipmentCategory = kitchenCategories.find(category => category.path === `/${entry.path}/`);

scripts/kitchen-static-content.mjs

@@ -2,7 +2,7 @@ import { equipmentFilters, legacyHotGroups } from '../src/features/commercial-ki
 import {quantityBand} from '../src/features/commercial-kitchen/data/model.mjs';
 import { kitchenPurchasePaths, orderSupportPaths } from '../src/features/commercial-kitchen/data/purchase-paths.mjs';
 import { kitchenFaq } from '../src/features/commercial-kitchen/data/discovery.mjs';
-import { steamCabinetPath } from '../src/features/commercial-kitchen/routes.mjs';
+import { steamCabinetPath, noodleCookerPath } from '../src/features/commercial-kitchen/routes.mjs';
 import { kitchenModelHref } from '../src/features/commercial-kitchen/data/categories.mjs';
 const escape = value => String(value).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
 
@@ -23,7 +23,7 @@ export function renderKitchenStaticContent(products, launch, heroMedia = '') {
     <h2 id="commercial-kitchen-equipment">Compare commercial kitchen equipment</h2><p>${products.length} models. Eight with indicative reference prices.</p>
     <span id="kitchen-induction-range"></span><span id="coffee-machine-catalogue"></span>
     ${Object.keys(legacyHotGroups).map(id=>`<span id="${id}"></span>`).join('')}
-    <nav aria-label="Equipment ranges">${equipmentFilters.flatMap(item=>item.links).map(item=>`<a href="${item.path}">${escape(item.label)} ↗</a>`).join(' · ')} · <a href="${steamCabinetPath}/">Commercial induction steam cabinets ↗</a></nav>
+    <nav aria-label="Equipment ranges">${equipmentFilters.flatMap(item=>item.links).map(item=>`<a href="${item.path}">${escape(item.label)} ↗</a>`).join(' · ')} · <a href="${steamCabinetPath}/">Commercial induction steam cabinets ↗</a> · <a href="${noodleCookerPath}/">Commercial countertop noodle cookers ↗</a></nav>
     <div>${[...featured, ...products.filter(p => !launch.featuredProductIds.includes(p.id))].map((p,index) => `${index===8?'<details class="catalog-rest"><summary>View all models</summary>':''}<article id="model-${escape(p.id)}">${p.handbookGroup?`<span id="catalog-${escape(p.id)}"></span>`: ''}<img src="${escape(p.image)}" alt="${escape(p.model + ' ' + p.name)}" width="420" height="290" loading="lazy" />
       <h3>${escape(p.model)} — ${escape(p.name)}</h3><p>${escape(p.metric)} · ${escape(p.dimensions)}</p>
       <dl>${Object.entries(p.specs).map(([key, value]) => `<dt>${escape(key)}</dt><dd>${escape(value)}</dd>`).join('')}</dl>

src/App.tsx

@@ -1,4 +1,4 @@
-import { steamCabinetPages } from "./features/commercial-kitchen/data/steamCabinetPage.mjs";
+import { cookingSelectionPages } from "./features/commercial-kitchen/data/cookingSelectionPages.mjs";
 import { inductionPages, zhHotCookingPage } from './features/commercial-kitchen/data/inductionPage.mjs';
 import {isNewMarket} from './features/freight/new-markets/model';
 import './features/freight/market-preparation.css';
@@ -481,7 +481,7 @@ export default function App() {
             {Object.values(navigationPrefixes).filter(Boolean).flatMap(prefix=>[kitchenPackagePath,...kitchenPackageScenarioPaths].map(path=><Route key={prefix+path} path={prefix+path} element={<LocalizedPackagePage/>}/>))}
             <Route path={kitchenPackagePath} element={<RestaurantKitchenPackages />} />
             <Route path={`${kitchenPackagePath}/:scenarioSlug`} element={<RestaurantKitchenScenario />} />
-            {[...inductionPages, ...steamCabinetPages, zhHotCookingPage].map(page => <Route key={page.path} path={page.path} element={<InductionCookingPage/>}/>)}
+            {[...inductionPages, ...cookingSelectionPages, zhHotCookingPage].map(page => <Route key={page.path} path={page.path} element={<InductionCookingPage/>}/>)}
             {kitchenCategoryPaths.flatMap(path => Object.values(navigationPrefixes).map(prefix=><Route key={prefix+path} path={prefix+path} element={prefix?<LocalizedCategoryPage/>:<KitchenCategoryPage/>}/>))}
             {Object.values(navigationPrefixes).filter(Boolean).map(prefix=><Route key={prefix+'audio'} path={prefix+'/sourcing/audio-speakers-from-china'} element={<LocalizedAudioPage/>}/>)}
             {Object.values(navigationPrefixes).map(prefix=><Route key={prefix+'coffee'} path={prefix+coffeePath} element={<CoffeePage/>}/>)}

src/features/commercial-kitchen/CookingSelectionContent.tsx

@@ -0,0 +1,61 @@
+import { SharedKitchenListBar } from './components/SharedKitchenList';
+import InductionCatalogue from './components/InductionCatalogue';
+import { cookingSelectionBreadcrumb, cookingSelections } from './data/cookingSelectionPages.mjs';
+import catalogueCopy from './locales/planning/induction-catalogue.json';
+import navigationCopy from './locales/planning/induction-use.json';
+
+export default function CookingSelectionContent({ group, locale, onAdd, count = 0, status = '' }: {
+  group: keyof typeof cookingSelections;
+  locale: keyof typeof catalogueCopy;
+  onAdd?: (id: string) => void;
+  count?: number;
+  status?: string;
+}) {
+  const { copy, id, models } = cookingSelections[group];
+  const text = copy[locale];
+  const breadcrumb = cookingSelectionBreadcrumb(group, locale);
+  const heroModel = models[1];
+  const names = 'doors' in text ? text.doors : catalogueCopy[locale].noodleNames;
+  const selectionId = id + '-selection';
+  const titleId = selectionId + '-title';
+  const installationId = id + '-installation';
+  return <main id="main-content" className={`ddnz-kitchen kitchen-brand induction-page ${id}-page`}
+    lang={locale === 'zh' ? 'zh-CN' : locale} dir={locale === 'ar' ? 'rtl' : 'ltr'}>
+    <nav className="kitchen-breadcrumb wrap" aria-label={navigationCopy[locale].labels[4]}><ol>
+      {breadcrumb.slice(0, -1).map(([name, path]) => <li key={path}><a href={path}>{name}</a></li>)}
+      <li aria-current="page">{text.label}</li>
+    </ol></nav>
+    <section className="section wrap induction-intro-section">
+      <div className="induction-intro-copy">
+        <h1>{text.heading}</h1>
+        <p>{text.intro}</p>
+        <div className="induction-page-actions">
+          <a className="button primary" href={'#' + selectionId}>{text.choose} ↓</a>
+          {'installation' in text && <a className="text-link" href={'#' + installationId}>{text.installation} ↓</a>}
+        </div>
+      </div>
+      <figure className="induction-hero-photo">
+        <img src={heroModel.image} alt={names[1]} width="1536" height="1024" fetchPriority="high"/>
+        <figcaption><bdi>{heroModel.model}</bdi></figcaption>
+      </figure>
+    </section>
+    <SharedKitchenListBar locale={locale} count={count} status={status}/>
+    <section className="section wrap induction-use-section" id={selectionId} aria-labelledby={titleId}>
+      <h2 id={titleId}>{text.choose}</h2>
+      <nav className="induction-use-nav" aria-labelledby={titleId}>
+        {models.map((model, index) => <a key={model.id} href={'#model-' + model.id}>
+          <img src={model.image} width="100" height="78" alt="" loading="lazy"/>
+          <span><strong>{names[index]} <span aria-hidden="true">↓</span></strong><span><bdi>{model.model}</bdi></span></span>
+        </a>)}
+      </nav>
+      {'note' in text && <p className="noodle-configuration-note">{text.note}</p>}
+    </section>
+    <InductionCatalogue locale={locale} group={group} expanded showTotal standaloneSelection onAdd={onAdd}/>
+    {'checks' in text && <section className="section wrap induction-quote-checks" id={installationId}>
+      <h2>{text.installation}</h2>
+      <div className="induction-site-checks">
+        {text.checks.map(([heading, body]) => <article key={heading}><h3>{heading}</h3><p>{body}</p></article>)}
+      </div>
+    </section>}
+  </main>;
+}

src/features/commercial-kitchen/InductionCookingPage.tsx

@@ -5,9 +5,8 @@ import SEO from '../../components/SEO';
 import SourcingHomepageNav from '../../components/SourcingHomepageNav';
 import Footer from '../../components/Footer';
 import { productAlternates, productRouteParts } from '../../lib/productLocalization.mjs';
-import SteamCabinetContent from './SteamCabinetContent';
-import { getSteamCabinetPage, steamCabinetSchema } from './data/steamCabinetPage.mjs';
-import { steamCabinetPath } from './routes.mjs';
+import CookingSelectionContent from './CookingSelectionContent';
+import { cookingSelectionGroup, getCookingSelectionPage, cookingSelectionSchema } from './data/cookingSelectionPages.mjs';
 import ChineseCookingContent from './ChineseCookingContent';
 import InductionCookingContent, { type InductionLocale } from './InductionCookingContent';
 import { sharedKitchenListHref, useSharedKitchenList } from './components/SharedKitchenList';
@@ -21,20 +20,20 @@ export default function InductionCookingPage() {
   const normalized = pathname.replace(/\/$/, '') + '/';
   const hotCooking = normalized === zhHotCookingPage.path;
   const route = productRouteParts(pathname);
-  const steamCabinet = route.path === steamCabinetPath;
+  const selectionGroup = cookingSelectionGroup(route.path);
   const locale = route.locale as InductionLocale;
-  const page = hotCooking ? zhHotCookingPage : steamCabinet ? getSteamCabinetPage(locale) : getInductionPage(locale);
+  const page = hotCooking ? zhHotCookingPage : selectionGroup ? getCookingSelectionPage(selectionGroup, locale) : getInductionPage(locale);
   const sharedList = useSharedKitchenList(locale);
   const quotePath = sharedKitchenListHref(locale);
 
   useEffect(() => {
     document.getElementById('schema-jsonld-static-page')?.remove();
     const schema = document.createElement('script');
     schema.type = 'application/ld+json';
-    schema.textContent = JSON.stringify(hotCooking ? chineseCookingSchema(zhHotCookingPage) : steamCabinet ? steamCabinetSchema(locale) : inductionPageSchema(locale));
+    schema.textContent = JSON.stringify(hotCooking ? chineseCookingSchema(zhHotCookingPage) : selectionGroup ? cookingSelectionSchema(selectionGroup, locale) : inductionPageSchema(locale));
     document.head.appendChild(schema);
     return () => schema.remove();
-  }, [hotCooking, steamCabinet, locale]);
+  }, [hotCooking, selectionGroup, locale]);
 
   useEffect(() => {
     if (!hash) return;
@@ -49,8 +48,8 @@ export default function InductionCookingPage() {
     <SourcingHomepageNav quotePath={quotePath} supportedLanguages={hotCooking ? ['zh'] : undefined}/>
     {hotCooking
       ? <ChineseCookingContent page={zhHotCookingPage} onAdd={sharedList.add} count={sharedList.count} status={sharedList.status}/>
-      : steamCabinet
-        ? <SteamCabinetContent locale={locale} onAdd={sharedList.add} count={sharedList.count} status={sharedList.status}/>
+      : selectionGroup
+        ? <CookingSelectionContent group={selectionGroup} locale={locale} onAdd={sharedList.add} count={sharedList.count} status={sharedList.status}/>
         : <InductionCookingContent locale={locale} onAdd={sharedList.add} count={sharedList.count} status={sharedList.status}/>}
     <Footer quotePath={quotePath} pageKey="commercial_kitchen" description={page.description}/>
   </>;