@burdenoff/microfe-movethewheels 2026.828.1 → 2026.830.2

package/src/movethewheels/pages/SettingsPage.tsx

@@ -31,6 +31,7 @@ import {
 } from '../components/ui';
 import { EmphasisPanel, PagePurpose, NextSteps } from '@burdenoff/fe-libs/ui';
 import { useModuleSettings, type ModulePreferences } from '../hooks/useSettings';
+import { useTr } from '../hooks';
 
 interface CompanyPrefs {
   name: string;
@@ -57,27 +58,6 @@ interface SettingsForm {
   integrations: Record<string, boolean>;
 }
 
-const INTEGRATIONS = [
-  { key: 'googleMaps', name: 'Google Maps' },
-  { key: 'stripe', name: 'Stripe' },
-  { key: 'twilio', name: 'Twilio' },
-];
-
-const NOTIFICATION_ITEMS: { key: keyof NotificationPrefs; label: string; desc: string }[] = [
-  {
-    key: 'orderUpdates',
-    label: 'Order updates',
-    desc: 'Receive notifications for order status changes',
-  },
-  { key: 'deliveryAlerts', label: 'Delivery alerts', desc: 'Get notified about delivery issues' },
-  {
-    key: 'systemNotifications',
-    label: 'System notifications',
-    desc: 'Important system updates and maintenance',
-  },
-  { key: 'weeklyReports', label: 'Weekly reports', desc: 'Receive weekly performance summary' },
-];
-
 function toForm(preferences: ModulePreferences): SettingsForm {
   const company = (preferences.company as Partial<CompanyPrefs> | undefined) ?? {};
   const localization = (preferences.localization as Partial<LocalizationPrefs> | undefined) ?? {};
@@ -108,11 +88,66 @@ function toForm(preferences: ModulePreferences): SettingsForm {
 }
 
 export default function SettingsPage() {
+  const tr = useTr();
   const { preferences, isLoading, isSaving, error, savePreferences } = useModuleSettings();
   const [tab, setTab] = useState('general');
   const [form, setForm] = useState<SettingsForm>(() => toForm({}));
   const [saved, setSaved] = useState(false);
 
+  const integrations = useMemo(
+    () => [
+      {
+        key: 'googleMaps',
+        name: tr('movethewheels.settings.integrations.googleMaps', 'Google Maps'),
+      },
+      { key: 'stripe', name: tr('movethewheels.settings.integrations.stripe', 'Stripe') },
+      { key: 'twilio', name: tr('movethewheels.settings.integrations.twilio', 'Twilio') },
+    ],
+    [tr]
+  );
+
+  const notificationItems: { key: keyof NotificationPrefs; label: string; desc: string }[] =
+    useMemo(
+      () => [
+        {
+          key: 'orderUpdates',
+          label: tr('movethewheels.settings.notifications.orderUpdates.label', 'Order updates'),
+          desc: tr(
+            'movethewheels.settings.notifications.orderUpdates.desc',
+            'Receive notifications for order status changes'
+          ),
+        },
+        {
+          key: 'deliveryAlerts',
+          label: tr('movethewheels.settings.notifications.deliveryAlerts.label', 'Delivery alerts'),
+          desc: tr(
+            'movethewheels.settings.notifications.deliveryAlerts.desc',
+            'Get notified about delivery issues'
+          ),
+        },
+        {
+          key: 'systemNotifications',
+          label: tr(
+            'movethewheels.settings.notifications.systemNotifications.label',
+            'System notifications'
+          ),
+          desc: tr(
+            'movethewheels.settings.notifications.systemNotifications.desc',
+            'Important system updates and maintenance'
+          ),
+        },
+        {
+          key: 'weeklyReports',
+          label: tr('movethewheels.settings.notifications.weeklyReports.label', 'Weekly reports'),
+          desc: tr(
+            'movethewheels.settings.notifications.weeklyReports.desc',
+            'Receive weekly performance summary'
+          ),
+        },
+      ],
+      [tr]
+    );
+
   const loadedForm = useMemo(() => toForm(preferences), [preferences]);
   useEffect(() => {
     setForm(loadedForm);
@@ -143,15 +178,15 @@ export default function SettingsPage() {
 
   return (
     <PageLayout
-      title="Settings"
-      subtitle="Manage your account and preferences"
+      title={tr('movethewheels.settings.title', 'Settings')}
+      subtitle={tr('movethewheels.settings.subtitle', 'Manage your account and preferences')}
       icon={<Settings size={24} />}
     >
       <PagePurpose icon={<Settings size={18} />}>
-        Configure how MoveTheWheels works for your business — company details and localization,
-        which notifications you receive, account security, and the integrations (maps, payments,
-        messaging) that power deliveries. Set these once so the rest of the app behaves the way you
-        expect.
+        {tr(
+          'movethewheels.settings.purpose',
+          'Configure how MoveTheWheels works for your business — company details and localization, which notifications you receive, account security, and the integrations (maps, payments, messaging) that power deliveries. Set these once so the rest of the app behaves the way you expect.'
+        )}
       </PagePurpose>
 
       {(saved || error) && (
@@ -163,7 +198,7 @@ export default function SettingsPage() {
               : 'bg-status-success-bg-subtle text-status-success-text'
           }`}
         >
-          {error ? error.message : 'Settings saved.'}
+          {error ? error.message : tr('movethewheels.settings.saved', 'Settings saved.')}
         </div>
       )}
 
@@ -172,29 +207,47 @@ export default function SettingsPage() {
         steps={[
           {
             id: 'company',
-            label: 'Confirm company details & localization',
-            description: 'Set your name, contact info, timezone, currency and language.',
+            label: tr(
+              'movethewheels.settings.nextSteps.company.label',
+              'Confirm company details & localization'
+            ),
+            description: tr(
+              'movethewheels.settings.nextSteps.company.description',
+              'Set your name, contact info, timezone, currency and language.'
+            ),
             icon: <User size={16} />,
             onClick: () => setTab('general'),
           },
           {
             id: 'notifications',
-            label: 'Choose your notifications',
-            description: 'Decide which order, delivery and report emails you receive.',
+            label: tr(
+              'movethewheels.settings.nextSteps.notifications.label',
+              'Choose your notifications'
+            ),
+            description: tr(
+              'movethewheels.settings.nextSteps.notifications.description',
+              'Decide which order, delivery and report emails you receive.'
+            ),
             icon: <Bell size={16} />,
             onClick: () => setTab('notifications'),
           },
           {
             id: 'security',
-            label: 'Secure your account',
-            description: 'Enable two-factor authentication for an extra layer of security.',
+            label: tr('movethewheels.settings.nextSteps.security.label', 'Secure your account'),
+            description: tr(
+              'movethewheels.settings.nextSteps.security.description',
+              'Enable two-factor authentication for an extra layer of security.'
+            ),
             icon: <Shield size={16} />,
             onClick: () => setTab('security'),
           },
           {
             id: 'integrations',
-            label: 'Connect your tools',
-            description: 'Link maps, payments and messaging providers.',
+            label: tr('movethewheels.settings.nextSteps.integrations.label', 'Connect your tools'),
+            description: tr(
+              'movethewheels.settings.nextSteps.integrations.description',
+              'Link maps, payments and messaging providers.'
+            ),
             icon: <Webhook size={16} />,
             onClick: () => setTab('integrations'),
           },
@@ -204,58 +257,74 @@ export default function SettingsPage() {
       <Tabs value={tab} onValueChange={setTab}>
         <TabsList className="mb-6">
           <TabsTrigger value="general">
-            <User size={16} /> General
+            <User size={16} /> {tr('movethewheels.settings.tabs.general', 'General')}
           </TabsTrigger>
           <TabsTrigger value="notifications">
-            <Bell size={16} /> Notifications
+            <Bell size={16} /> {tr('movethewheels.settings.tabs.notifications', 'Notifications')}
           </TabsTrigger>
           <TabsTrigger value="security">
-            <Shield size={16} /> Security
+            <Shield size={16} /> {tr('movethewheels.settings.tabs.security', 'Security')}
           </TabsTrigger>
           <TabsTrigger value="integrations">
-            <Webhook size={16} /> Integrations
+            <Webhook size={16} /> {tr('movethewheels.settings.tabs.integrations', 'Integrations')}
           </TabsTrigger>
         </TabsList>
 
         <TabsContent value="general" className="space-y-6">
           {/* Company Information — the page's single emphasis zone */}
           <EmphasisPanel>
-            <h2 className="text-base font-semibold text-text-primary">Company Information</h2>
-            <p className="text-sm text-text-secondary mb-4">Basic company details</p>
+            <h2 className="text-base font-semibold text-text-primary">
+              {tr('movethewheels.settings.company.title', 'Company Information')}
+            </h2>
+            <p className="text-sm text-text-secondary mb-4">
+              {tr('movethewheels.settings.company.basicDetails', 'Basic company details')}
+            </p>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div>
-                <Label>Company Name</Label>
+                <Label>{tr('movethewheels.settings.company.name', 'Company Name')}</Label>
                 <Input
                   value={form.company.name}
-                  placeholder="Your company name"
+                  placeholder={tr(
+                    'movethewheels.settings.company.placeholders.name',
+                    'Your company name'
+                  )}
                   disabled={isLoading}
                   onChange={(e) => patchCompany({ name: e.target.value })}
                 />
               </div>
               <div>
-                <Label>Contact Email</Label>
+                <Label>{tr('movethewheels.settings.company.email', 'Contact Email')}</Label>
                 <Input
                   type="email"
                   value={form.company.email}
-                  placeholder="contact@example.com"
+                  placeholder={tr(
+                    'movethewheels.settings.company.placeholders.email',
+                    'contact@example.com'
+                  )}
                   disabled={isLoading}
                   onChange={(e) => patchCompany({ email: e.target.value })}
                 />
               </div>
               <div>
-                <Label>Phone</Label>
+                <Label>{tr('movethewheels.settings.company.phone', 'Phone')}</Label>
                 <Input
                   value={form.company.phone}
-                  placeholder="+1-555-0100"
+                  placeholder={tr(
+                    'movethewheels.settings.company.placeholders.phone',
+                    '+1-555-0100'
+                  )}
                   disabled={isLoading}
                   onChange={(e) => patchCompany({ phone: e.target.value })}
                 />
               </div>
               <div>
-                <Label>Website</Label>
+                <Label>{tr('movethewheels.settings.company.website', 'Website')}</Label>
                 <Input
                   value={form.company.website}
-                  placeholder="https://example.com"
+                  placeholder={tr(
+                    'movethewheels.settings.company.placeholders.website',
+                    'https://example.com'
+                  )}
                   disabled={isLoading}
                   onChange={(e) => patchCompany({ website: e.target.value })}
                 />
@@ -266,13 +335,14 @@ export default function SettingsPage() {
           <Card>
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
-                <Globe size={18} /> Localization
+                <Globe size={18} />{' '}
+                {tr('movethewheels.settings.localization.title', 'Localization')}
               </CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
               <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                 <div>
-                  <Label>Timezone</Label>
+                  <Label>{tr('movethewheels.settings.localization.timezone', 'Timezone')}</Label>
                   <Select
                     value={form.localization.timezone}
                     onValueChange={(value) => patchLocalization({ timezone: value })}
@@ -288,7 +358,7 @@ export default function SettingsPage() {
                   </Select>
                 </div>
                 <div>
-                  <Label>Currency</Label>
+                  <Label>{tr('movethewheels.settings.localization.currency', 'Currency')}</Label>
                   <Select
                     value={form.localization.currency}
                     onValueChange={(value) => patchLocalization({ currency: value })}
@@ -304,7 +374,7 @@ export default function SettingsPage() {
                   </Select>
                 </div>
                 <div>
-                  <Label>Language</Label>
+                  <Label>{tr('movethewheels.settings.localization.language', 'Language')}</Label>
                   <Select
                     value={form.localization.language}
                     onValueChange={(value) => patchLocalization({ language: value })}
@@ -327,10 +397,12 @@ export default function SettingsPage() {
         <TabsContent value="notifications" className="space-y-6">
           <Card>
             <CardHeader>
-              <CardTitle>Email Notifications</CardTitle>
+              <CardTitle>
+                {tr('movethewheels.settings.notifications.title', 'Email Notifications')}
+              </CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
-              {NOTIFICATION_ITEMS.map((item) => (
+              {notificationItems.map((item) => (
                 <div key={item.key} className="flex items-center justify-between">
                   <div>
                     <p className="font-medium">{item.label}</p>
@@ -350,22 +422,33 @@ export default function SettingsPage() {
         <TabsContent value="security" className="space-y-6">
           <Card>
             <CardHeader>
-              <CardTitle>Password</CardTitle>
+              <CardTitle>
+                {tr('movethewheels.settings.security.password.title', 'Password')}
+              </CardTitle>
               <CardDescription>
-                Your password and sign-in credentials are managed centrally by your workspace
-                identity provider — update them from your account security settings, not here.
+                {tr(
+                  'movethewheels.settings.security.password.description',
+                  'Your password and sign-in credentials are managed centrally by your workspace identity provider — update them from your account security settings, not here.'
+                )}
               </CardDescription>
             </CardHeader>
           </Card>
           <Card>
             <CardHeader>
-              <CardTitle>Two-Factor Authentication</CardTitle>
-              <CardDescription>Add an extra layer of security</CardDescription>
+              <CardTitle>
+                {tr('movethewheels.settings.security.twoFactor.title', 'Two-Factor Authentication')}
+              </CardTitle>
+              <CardDescription>
+                {tr(
+                  'movethewheels.settings.security.twoFactor.description',
+                  'Add an extra layer of security'
+                )}
+              </CardDescription>
             </CardHeader>
             <CardContent>
               <div className="flex items-center justify-between">
                 <p>
-                  Status:{' '}
+                  {tr('movethewheels.settings.security.twoFactor.status', 'Status:')}{' '}
                   <span
                     className={`font-medium ${
                       form.twoFactorEnabled
@@ -373,7 +456,9 @@ export default function SettingsPage() {
                         : 'text-status-warning-text'
                     }`}
                   >
-                    {form.twoFactorEnabled ? 'Enabled' : 'Disabled'}
+                    {form.twoFactorEnabled
+                      ? tr('movethewheels.settings.security.twoFactor.enabled', 'Enabled')
+                      : tr('movethewheels.settings.security.twoFactor.disabled', 'Disabled')}
                   </span>
                 </p>
                 <Button
@@ -383,7 +468,9 @@ export default function SettingsPage() {
                     setForm((prev) => ({ ...prev, twoFactorEnabled: !prev.twoFactorEnabled }))
                   }
                 >
-                  {form.twoFactorEnabled ? 'Disable 2FA' : 'Enable 2FA'}
+                  {form.twoFactorEnabled
+                    ? tr('movethewheels.settings.security.twoFactor.disable', 'Disable 2FA')
+                    : tr('movethewheels.settings.security.twoFactor.enable', 'Enable 2FA')}
                 </Button>
               </div>
             </CardContent>
@@ -393,13 +480,18 @@ export default function SettingsPage() {
         <TabsContent value="integrations" className="space-y-6">
           <Card>
             <CardHeader>
-              <CardTitle>Connected Services</CardTitle>
+              <CardTitle>
+                {tr('movethewheels.settings.integrations.title', 'Connected Services')}
+              </CardTitle>
               <CardDescription>
-                Connect the providers that power maps, payments and messaging.
+                {tr(
+                  'movethewheels.settings.integrations.description',
+                  'Connect the providers that power maps, payments and messaging.'
+                )}
               </CardDescription>
             </CardHeader>
             <CardContent className="space-y-3">
-              {INTEGRATIONS.map((service) => {
+              {integrations.map((service) => {
                 const connected = form.integrations[service.key] === true;
                 return (
                   <div
@@ -409,7 +501,12 @@ export default function SettingsPage() {
                     <div>
                       <span className="font-medium">{service.name}</span>
                       <p className="text-sm text-text-secondary">
-                        {connected ? 'Connected' : 'Not configured'}
+                        {connected
+                          ? tr('movethewheels.settings.integrations.connected', 'Connected')
+                          : tr(
+                              'movethewheels.settings.integrations.notConfigured',
+                              'Not configured'
+                            )}
                       </p>
                     </div>
                     <Button
@@ -426,7 +523,9 @@ export default function SettingsPage() {
                         }))
                       }
                     >
-                      {connected ? 'Disconnect' : 'Connect'}
+                      {connected
+                        ? tr('movethewheels.settings.integrations.disconnect', 'Disconnect')
+                        : tr('movethewheels.settings.integrations.connect', 'Connect')}
                     </Button>
                   </div>
                 );
@@ -438,7 +537,10 @@ export default function SettingsPage() {
 
       <div className="flex justify-end">
         <Button onClick={() => void handleSave()} disabled={isSaving || isLoading}>
-          <Save size={16} /> {isSaving ? 'Saving…' : 'Save Changes'}
+          <Save size={16} />{' '}
+          {isSaving
+            ? tr('movethewheels.settings.saving', 'Saving…')
+            : tr('movethewheels.settings.saveChanges', 'Save Changes')}
         </Button>
       </div>
     </PageLayout>

package/src/movethewheels/shared/hooks/useTr.ts

@@ -0,0 +1,37 @@
+import { useCallback } from 'react';
+import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
+
+/**
+ * useTr — translation hook with fallback semantics.
+ *
+ * Wraps `useI18n().t()` so that when a key has no translation (i.e. the
+ * provider returns the key itself), the caller's English fallback is used
+ * instead. This keeps consumer call sites consistent and avoids leaking
+ * untranslated keys into the UI.
+ *
+ * Supports optional interpolation params using `{{key}}` placeholders.
+ *
+ * @example
+ *   const tr = useTr();
+ *   return <h1>{tr('movethewheels.dashboard.title', 'Dashboard')}</h1>;
+ *   return <p>{tr('movethewheels.delete.confirm', 'Delete {{count}} items?', { count: 5 })}</p>;
+ */
+export function useTr(): (
+  key: string,
+  fallback: string,
+  params?: Record<string, string | number>
+) => string {
+  const { t } = useI18n();
+  return useCallback(
+    (key: string, fallback: string, params?: Record<string, string | number>): string => {
+      const translated = t(key);
+      const raw = translated === key ? fallback : translated;
+      if (!params) return raw;
+      return Object.entries(params).reduce(
+        (str, [k, v]) => str.replace(new RegExp(`\\{\\{${k}\\}\\}`, 'g'), String(v)),
+        raw
+      );
+    },
+    [t]
+  );
+}