Make all of the new products pages translatable

app/pods/components/product-list/component.js

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
 
 export default class ProductListComponent extends Component {
   // @arg title;
@@ -7,6 +8,8 @@ export default class ProductListComponent extends Component {
   // @arg searchFor;
   // @arg loading;
 
+  @service translation;
+
   get groups() {
     const { groupBy, products, use } = this.args;
 
@@ -18,12 +21,14 @@ export default class ProductListComponent extends Component {
         .sortBy('rank');
 
       return mainFamilies.map((family) => {
+        const id = family.get('id');
+        const title = this.translation.t(family.get('label'), `products.4`, id);
         const subset = products
-          .filterBy('mainFamily.id', family.get('id'))
+          .filterBy('mainFamily.id', id)
           .sortBy('subFamily.rank');
 
         return {
-          title: family.get('label'),
+          title,
           featured: subset.filterBy('isFeatured'),
           hidden: subset.filterBy('isHidden')
         };
@@ -44,12 +49,17 @@ export default class ProductListComponent extends Component {
       const groups = [...subFamilies, undefined];
 
       return groups.map((family) => {
+        const id = family ? family.get('id') : null;
         const subset = family
-          ? products.filterBy('subFamily.id', family.get('id'))
+          ? products.filterBy('subFamily.id', id)
           : products.rejectBy('subFamily.id');
 
+        const title = family
+          ? this.translation.t(family.get('label'), `products.14`, id)
+          : this.translation.t('Other', `products.14`, 'other');
+
         return {
-          title: family ? family.get('label') : 'Other',
+          title,
           featured: subset.filterBy('isFeatured'),
           hidden: subset.filterBy('isHidden')
         };
@@ -64,9 +74,14 @@ export default class ProductListComponent extends Component {
 
       return uses.map((use) => {
         const subset = use.get('productsByRank');
+        const title = this.translation.t(
+          use.get('forLabel'),
+          'products.16',
+          use.get('id')
+        );
 
         return {
-          title: use.get('forLabel'),
+          title,
           featured: subset.filterBy('isFeatured'),
           hidden: subset.filterBy('isHidden')
         };
@@ -79,9 +94,14 @@ export default class ProductListComponent extends Component {
 
       return mainFamilies.map((family) => {
         const subset = products.filterBy('mainFamily.id', family.get('id'));
+        const title = this.translation.t(
+          `${family.get('label')} for ${use.get('name')}`,
+          'products.17',
+          `${family.get('id')}-for-${use.get('id')}`
+        );
 
         return {
-          title: `${family.get('label')} for ${use.get('name')}`,
+          title,
           featured: subset.filterBy('isFeatured'),
           hidden: subset.filterBy('isHidden')
         };

app/pods/products/controller.js

@@ -6,6 +6,7 @@ import { action } from '@ember/object';
 export default class ProductsController extends Controller {
   @service page;
   @service router;
+  @service translation;
 
   // SEARCH BY NAME
 
@@ -19,6 +20,12 @@ export default class ProductsController extends Controller {
     this.search = input.value;
   }
 
+  get searchTitle() {
+    const resultsFor = this.translation.t('Results for', 'products.14');
+
+    return `${resultsFor} "${this.search}"`;
+  }
+
   // FAMILY
 
   @tracked mainFamilies;
@@ -33,8 +40,9 @@ export default class ProductsController extends Controller {
         : this.mainFamilies;
 
     return families.sortBy('rank').map((family) => {
-      const label = family.get('label');
-      const selected = family.get('id') === this.selectedFamilyId;
+      const id = family.get('id');
+      const label = this.translation.t(family.get('label'), `products.4`, id);
+      const isSelected = id === this.selectedFamilyId;
 
       let route;
       let model;
@@ -57,12 +65,12 @@ export default class ProductsController extends Controller {
         model = family.get('id');
       }
 
-      return { label, route, model, models, selected };
+      return { label, route, model, models, isSelected };
     });
   }
 
   get selectedFamilyOption() {
-    return this.familyOptions.find((option) => option.selected);
+    return this.familyOptions.find((option) => option.isSelected);
   }
 
   // USE
@@ -77,8 +85,13 @@ export default class ProductsController extends Controller {
       this.selectedFamilyId && this.usesSubset ? this.usesSubset : this.uses;
 
     return uses.sortBy('rank').map((use) => {
-      const label = use.get('label');
-      const selected = use.get('id') === this.selectedUseId;
+      const id = use.get('id');
+      const label = this.translation.t(
+        use.get('label'),
+        'products.5',
+        `for-${id}`
+      );
+      const selected = id === this.selectedUseId;
 
       let route;
       let model;

app/pods/products/family/controller.js

@@ -2,6 +2,7 @@ import Controller from '@ember/controller';
 import { tracked } from '@glimmer/tracking';
 
 export default class ProductsFamilyController extends Controller {
+  @tracked title;
   @tracked products;
   @tracked family;
 

app/pods/products/family/route.js

@@ -19,8 +19,11 @@ export default class ProductsFamilyRoute extends BaseRoute {
       usesLoading: true
     });
 
+    const id = family.get('id');
+    const title = this.translation.t(family.get('label'), `products.4`, id);
+
     this.controllerFor('products.familyLoading').setProperties({
-      title: family ? family.get('label') : 'Loading'
+      title
     });
   }
 
@@ -37,18 +40,22 @@ export default class ProductsFamilyRoute extends BaseRoute {
     super.activate();
 
     const family = model.family;
+    const id = family.get('id');
     const products = this.store
       .peekAll('product')
-      .filterBy('mainFamily.id', family.get('id'));
+      .filterBy('mainFamily.id', id);
     const uses = products.mapBy('uses').flat().uniqBy('id');
 
     this.controllerFor('products').setProperties({
-      selectedFamilyId: family.get('id'),
+      selectedFamilyId: id,
       usesSubset: uses,
       usesLoading: false
     });
 
+    const title = this.translation.t(family.get('label'), `products.4`, id);
+
     this.controllerFor('products.family').setProperties({
+      title,
       family,
       products
     });

app/pods/products/family/template.hbs

@@ -1,5 +1,5 @@
 <ProductList
-  @title={{this.family.label}}
+  @title={{this.title}}
   @products={{this.products}}
   @groupBy={{this.groupBy}}
   @searchFor={{this.query}}

app/pods/products/index/route.js

@@ -15,8 +15,10 @@ export default class ProductsIndexRoute extends BaseRoute {
       title: 'All products'
     });
 
-    // TODO
-    this.headData.update(this.seo.products);
+    this.headData.update(this.seo.allProducts);
+
+    // TODO: inspect mobile
+    // TODO: translate
     this.page.update({
       id: 'products-index',
       mainClasses: 'products'

app/pods/products/index/template.hbs

@@ -1,5 +1,5 @@
 <ProductList
-  @title='All products'
+  @title={{t 'All products' 'products.1'}}
   @products={{@model.products}}
   @groupBy='mainFamily'
   @searchFor={{this.query}}

app/pods/products/mix/route.js

@@ -23,10 +23,14 @@ export default class ProductsMixRoute extends BaseRoute {
       usesSubset: null
     });
 
+    const title = this.translation.t(
+      `${family.get('label')} for ${use.get('name')}`,
+      'products.19',
+      `${family.get('id')} for ${use.get('id')}`
+    );
+
     this.controllerFor('products.mixLoading').setProperties({
-      title: family
-        ? `${family.get('label')} for ${use.get('name')}`
-        : 'Loading'
+      title
     });
 
     // TODO
@@ -44,7 +48,8 @@ export default class ProductsMixRoute extends BaseRoute {
     return hash({
       productUses: this.store.query('product-use', {
         filter: { use: params.use_id },
-        include: 'product,use'
+        include: 'product,use',
+        reload: true
       })
     });
   }
@@ -57,15 +62,19 @@ export default class ProductsMixRoute extends BaseRoute {
     const useId = params.use_id;
     const family = this.store.peekRecord('product-family', familyId);
     const use = this.store.peekRecord('use', useId);
-    const title = `${family.get('label')} for ${use.get('name')}`;
+    const title = this.translation.t(
+      `${family.get('label')} for ${use.get('name')}`,
+      'products.19',
+      `${family.get('id')} for ${use.get('id')}`
+    );
     const products = model.productUses
       .mapBy('product')
       .uniqBy('id')
       .filterBy('mainFamily.id', familyId);
 
     this.controllerFor('products.mix').setProperties({
-      title: title,
-      products: products
+      title,
+      products
     });
   }
 

app/pods/products/template.hbs

@@ -3,7 +3,7 @@
     <aside>
       <div class={{if this.stickyMenu 'sticky'}}>
         <fieldset>
-          <legend>Search product</legend>
+          <legend>{{t 'Search product' 'products.11'}}</legend>
           <TextInput
             @value={{this.search}}
             @icon='search'
@@ -17,12 +17,12 @@
             <legend>
               {{if
                 this.selectedFamilyOption
-                'Product category'
-                'Product categories'
+                (t 'Product category' 'products.12')
+                (t 'Product categories' 'products.13')
               }}
             </legend>
             {{#if this.familiesLoading}}
-              <p>Loading ...</p>
+              <p>{{t 'Loading ...' 'loading.1'}}</p>
             {{else}}
               <Pills::Routed
                 @options={{this.familyOptions}}
@@ -32,9 +32,9 @@
           </fieldset>
 
           <fieldset>
-            <legend>Suitable for ...</legend>
+            <legend>{{t 'Suitable for' 'product.9'}}</legend>
             {{#if this.usesLoading}}
-              <p>Loading ...</p>
+              <p>{{t 'Loading ...' 'loading.1'}}</p>
             {{else}}
               <Pills::Routed
                 @options={{this.useOptions}}
@@ -49,7 +49,7 @@
     <article class={{this.layout}}>
       {{#if this.search}}
         <ProductList
-          @title='Results for "{{this.search}}"'
+          @title={{this.searchTitle}}
           @products={{@model.products}}
           @search={{this.search}}
           @groupBy='none'

app/pods/products/use/route.js

@@ -48,18 +48,24 @@ export default class ProductsUseRoute extends BaseRoute {
 
     const use = model.use;
     const products = use.products;
-    const families = products.mapBy('mainFamily').uniqBy('id');
+    const familiesSubset = products.mapBy('mainFamily').uniqBy('id');
 
     this.controllerFor('products').setProperties({
       selectedUseId: use.get('id'),
-      familiesSubset: families,
+      familiesSubset,
       familiesLoading: false
     });
 
+    const title = this.translation.t(
+      `Products for ${use.get('name')}`,
+      'products.18',
+      use.get('id')
+    );
+
     this.controllerFor('products.use').setProperties({
-      title: `Products for ${use.get('name')}`,
-      products: products,
-      use: use
+      title,
+      products,
+      use
     });
   }
 

app/services/seo.js

@@ -27,12 +27,12 @@ export default class SeoService extends Service {
     return data;
   }
 
-  get products() {
+  get allProducts() {
     return {
       canonicalPath: '/products',
-      title: this.translation.t('Products', 'seo.2'),
+      title: this.translation.t('All products', 'products.1'),
       description: this.translation.t(
-        'See all the products we produce: soldering fluxes, solder pastes, solder wires, solder alloys, ... All the chemistry needed for soldering electronics.',
+        'We produce soldering fluxes, solder pastes, solder wires, solder alloys, fluxing systems and auxiliaries for soldering electronics.',
         'seo.3'
       ),
       ogImagePath: '/images/public/og/og-products.jpg',
@@ -45,6 +45,24 @@ export default class SeoService extends Service {
     };
   }
 
+  // get products() {
+  //   return {
+  //     canonicalPath: '/products',
+  //     title: this.translation.t('Products', 'seo.2'),
+  //     description: this.translation.t(
+  //       'See all the products we produce: soldering fluxes, solder pastes, solder wires, solder alloys, ... All the chemistry needed for soldering electronics.',
+  //       'seo.3'
+  //     ),
+  //     ogImagePath: '/images/public/og/og-products.jpg',
+  //     ogImageAlt: this.translation.t(
+  //       'Interflux Electronics soldering fluxes, solder pastes, solder wires and solder alloys',
+  //       'seo.4'
+  //     ),
+  //     ogImageWidth: '1200',
+  //     ogImageHeight: '630'
+  //   };
+  // }
+
   productsForFamily(family) {
     return {
       canonicalPath: `/products/family/${family.id}`,