@djangocfg/layouts 2.1.110 → 2.1.112

package/src/snippets/PWAInstall/components/DesktopGuide.tsx

@@ -11,6 +11,7 @@
 import { ArrowDownToLine, Check, Menu, Monitor, Plus, Search } from 'lucide-react';
 import React, { useMemo } from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import {
     Button, Card, CardContent, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader,
     DialogTitle
@@ -32,28 +33,29 @@ function getBrowserCategory(browser: {
   return 'unknown';
 }
 
-function getBrowserSteps(category: BrowserCategory, browserName: string): InstallStep[] {
+type TranslationFn = (key: string) => string;
+
+function getBrowserSteps(category: BrowserCategory, t: TranslationFn): InstallStep[] {
   switch (category) {
     case 'chromium':
-      // Chrome, Edge, Brave, Arc, Vivaldi, Opera, Yandex, etc.
       return [
         {
           number: 1,
-          title: 'Find Install Icon',
+          title: t('layouts.pwa.chromiumStep1Title'),
           icon: ArrowDownToLine,
-          description: 'Look for install icon in address bar (right side)',
+          description: t('layouts.pwa.chromiumStep1Desc'),
         },
         {
           number: 2,
-          title: 'Click Install',
+          title: t('layouts.pwa.chromiumStep2Title'),
           icon: Plus,
-          description: 'Click the icon and select "Install"',
+          description: t('layouts.pwa.chromiumStep2Desc'),
         },
         {
           number: 3,
-          title: 'Confirm',
+          title: t('layouts.pwa.chromiumStep3Title'),
           icon: Check,
-          description: 'Click "Install" in the popup dialog',
+          description: t('layouts.pwa.chromiumStep3Desc'),
         },
       ];
 
@@ -61,21 +63,21 @@ function getBrowserSteps(category: BrowserCategory, browserName: string): Instal
       return [
         {
           number: 1,
-          title: 'Open Menu',
+          title: t('layouts.pwa.firefoxStep1Title'),
           icon: Menu,
-          description: 'Click the menu button (three lines)',
+          description: t('layouts.pwa.firefoxStep1Desc'),
         },
         {
           number: 2,
-          title: 'Find Install Option',
+          title: t('layouts.pwa.firefoxStep2Title'),
           icon: Search,
-          description: 'Look for "Install" or "Add to Home Screen"',
+          description: t('layouts.pwa.firefoxStep2Desc'),
         },
         {
           number: 3,
-          title: 'Confirm',
+          title: t('layouts.pwa.firefoxStep3Title'),
           icon: Check,
-          description: 'Follow the installation prompts',
+          description: t('layouts.pwa.firefoxStep3Desc'),
         },
       ];
 
@@ -83,15 +85,15 @@ function getBrowserSteps(category: BrowserCategory, browserName: string): Instal
       return [
         {
           number: 1,
-          title: 'Limited Support',
+          title: t('layouts.pwa.safariStep1Title'),
           icon: Monitor,
-          description: 'Safari on macOS has limited PWA support',
+          description: t('layouts.pwa.safariStep1Desc'),
         },
         {
           number: 2,
-          title: 'Use Chromium Browser',
+          title: t('layouts.pwa.safariStep2Title'),
           icon: ArrowDownToLine,
-          description: 'Consider using Chrome, Edge, or Brave for full PWA experience',
+          description: t('layouts.pwa.safariStep2Desc'),
         },
       ];
 
@@ -99,21 +101,21 @@ function getBrowserSteps(category: BrowserCategory, browserName: string): Instal
       return [
         {
           number: 1,
-          title: 'Check Address Bar',
+          title: t('layouts.pwa.unknownStep1Title'),
           icon: ArrowDownToLine,
-          description: 'Look for an install or download icon',
+          description: t('layouts.pwa.unknownStep1Desc'),
         },
         {
           number: 2,
-          title: 'Or Use Menu',
+          title: t('layouts.pwa.unknownStep2Title'),
           icon: Menu,
-          description: 'Check browser menu for install option',
+          description: t('layouts.pwa.unknownStep2Desc'),
         },
         {
           number: 3,
-          title: 'Confirm',
+          title: t('layouts.pwa.unknownStep3Title'),
           icon: Check,
-          description: 'Follow the installation prompts',
+          description: t('layouts.pwa.unknownStep3Desc'),
         },
       ];
   }
@@ -157,15 +159,25 @@ export function DesktopGuide({ onDismiss, open = true }: IOSGuideModalProps) {
     isOpera,
     isYandex,
   } = useInstall();
+  const t = useTypedT<I18nTranslations>();
+
+  const labels = useMemo(() => ({
+    title: t('layouts.pwa.desktopTitle'),
+    description: t('layouts.pwa.desktopDescription'),
+    descSafari: t('layouts.pwa.desktopDescSafari'),
+    tip: t('layouts.pwa.desktopTip'),
+    firefoxNote: t('layouts.pwa.desktopFirefoxNote'),
+    gotIt: t('layouts.pwa.gotIt'),
+  }), [t]);
 
   const category = useMemo(
     () => getBrowserCategory({ isChromium, isFirefox, isSafari }),
     [isChromium, isFirefox, isSafari]
   );
 
-  const steps = useMemo(() => getBrowserSteps(category, browserName), [category, browserName]);
+  const steps = useMemo(() => getBrowserSteps(category, t), [category, t]);
 
-  // Get specific browser display name with emoji
+  // Get specific browser display name
   const displayName = useMemo(() => {
     if (isEdge) return 'Edge';
     if (isBrave) return 'Brave';
@@ -182,12 +194,12 @@ export function DesktopGuide({ onDismiss, open = true }: IOSGuideModalProps) {
         <DialogHeader className="text-left">
           <DialogTitle className="flex items-center gap-2">
             <Monitor className="w-5 h-5 text-primary" />
-            Install App on Desktop
+            {labels.title}
           </DialogTitle>
           <DialogDescription className="text-left">
             {isSafari
-              ? 'Safari on macOS has limited PWA support. For the best experience, use Chrome, Edge, or Brave.'
-              : `Install this app on ${displayName} for quick access from your desktop`
+              ? labels.descSafari
+              : labels.description.replace('{browser}', displayName)
             }
           </DialogDescription>
         </DialogHeader>
@@ -200,20 +212,20 @@ export function DesktopGuide({ onDismiss, open = true }: IOSGuideModalProps) {
 
         {category === 'chromium' && (
           <div className="p-3 bg-muted/30 rounded-lg text-xs text-muted-foreground">
-            💡 Tip: You can also right-click the page and look for "Install" option in {displayName}
+            💡 {labels.tip.replace('{browser}', displayName)}
           </div>
         )}
 
         {category === 'firefox' && (
           <div className="p-3 bg-amber-500/10 rounded-lg text-xs text-amber-700 dark:text-amber-400">
-            ℹ️ Note: Firefox has limited PWA support. Some features may not work as expected.
+            ℹ️ {labels.firefoxNote}
           </div>
         )}
 
         <DialogFooter>
           <Button onClick={onDismiss} variant="default" className="w-full">
             <Check className="w-4 h-4 mr-2" />
-            Got It
+            {labels.gotIt}
           </Button>
         </DialogFooter>
       </DialogContent>

package/src/snippets/PWAInstall/components/IOSGuideDrawer.tsx

@@ -8,35 +8,15 @@
  */
 
 import { ArrowDown, ArrowUpRight, Check, CheckCircle, Share } from 'lucide-react';
-import React from 'react';
+import React, { useMemo } from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import {
     Button, Card, CardContent, Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle
 } from '@djangocfg/ui-core/components';
 
 import type { IOSGuideModalProps, InstallStep } from '../types';
 
-const steps: InstallStep[] = [
-  {
-    number: 1,
-    title: 'Tap Share',
-    icon: ArrowUpRight,
-    description: 'At the bottom of Safari',
-  },
-  {
-    number: 2,
-    title: 'Scroll & Tap',
-    icon: ArrowDown,
-    description: '"Add to Home Screen"',
-  },
-  {
-    number: 3,
-    title: 'Confirm',
-    icon: CheckCircle,
-    description: 'Tap "Add" in top-right',
-  },
-];
-
 function StepCard({ step }: { step: InstallStep }) {
   return (
     <Card className="border border-border">
@@ -63,16 +43,45 @@ function StepCard({ step }: { step: InstallStep }) {
 }
 
 export function IOSGuideDrawer({ onDismiss, open = true }: IOSGuideModalProps) {
+  const t = useTypedT<I18nTranslations>();
+
+  const labels = useMemo(() => ({
+    title: t('layouts.pwa.iosTitle'),
+    description: t('layouts.pwa.iosDescription'),
+    gotIt: t('layouts.pwa.gotIt'),
+  }), [t]);
+
+  const steps: InstallStep[] = useMemo(() => [
+    {
+      number: 1,
+      title: t('layouts.pwa.iosStep1Title'),
+      icon: ArrowUpRight,
+      description: t('layouts.pwa.iosStep1Desc'),
+    },
+    {
+      number: 2,
+      title: t('layouts.pwa.iosStep2Title'),
+      icon: ArrowDown,
+      description: t('layouts.pwa.iosStep2Desc'),
+    },
+    {
+      number: 3,
+      title: t('layouts.pwa.iosStep3Title'),
+      icon: CheckCircle,
+      description: t('layouts.pwa.iosStep3Desc'),
+    },
+  ], [t]);
+
   return (
     <Drawer open={open} onOpenChange={(isOpen) => !isOpen && onDismiss()}>
       <DrawerContent>
         <DrawerHeader className="text-left">
           <DrawerTitle className="flex items-center gap-2">
             <Share className="w-5 h-5 text-primary" />
-            Add to Home Screen
+            {labels.title}
           </DrawerTitle>
           <DrawerDescription className="text-left">
-            Install this app on your iPhone for quick access and a better experience
+            {labels.description}
           </DrawerDescription>
         </DrawerHeader>
 
@@ -85,7 +94,7 @@ export function IOSGuideDrawer({ onDismiss, open = true }: IOSGuideModalProps) {
         <div className="p-4 pt-0">
           <Button onClick={onDismiss} variant="default" className="w-full">
             <Check className="w-4 h-4 mr-2" />
-            Got It
+            {labels.gotIt}
           </Button>
         </div>
       </DrawerContent>

package/src/snippets/PWAInstall/components/IOSGuideModal.tsx

@@ -7,8 +7,9 @@
  */
 
 import { ArrowDown, ArrowUpRight, Check, CheckCircle, Share } from 'lucide-react';
-import React from 'react';
+import React, { useMemo } from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import {
     Button, Card, CardContent, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader,
     DialogTitle
@@ -16,27 +17,6 @@ import {
 
 import type { IOSGuideModalProps, InstallStep } from '../types';
 
-const steps: InstallStep[] = [
-  {
-    number: 1,
-    title: 'Tap Share',
-    icon: ArrowUpRight,
-    description: 'At the bottom of Safari',
-  },
-  {
-    number: 2,
-    title: 'Scroll & Tap',
-    icon: ArrowDown,
-    description: '"Add to Home Screen"',
-  },
-  {
-    number: 3,
-    title: 'Confirm',
-    icon: CheckCircle,
-    description: 'Tap "Add" in top-right',
-  },
-];
-
 function StepCard({ step }: { step: InstallStep }) {
   return (
     <Card className="border border-border">
@@ -63,16 +43,45 @@ function StepCard({ step }: { step: InstallStep }) {
 }
 
 export function IOSGuideModal({ onDismiss, open = true }: IOSGuideModalProps) {
+  const t = useTypedT<I18nTranslations>();
+
+  const labels = useMemo(() => ({
+    title: t('layouts.pwa.iosTitle'),
+    description: t('layouts.pwa.iosDescription'),
+    gotIt: t('layouts.pwa.gotIt'),
+  }), [t]);
+
+  const steps: InstallStep[] = useMemo(() => [
+    {
+      number: 1,
+      title: t('layouts.pwa.iosStep1Title'),
+      icon: ArrowUpRight,
+      description: t('layouts.pwa.iosStep1Desc'),
+    },
+    {
+      number: 2,
+      title: t('layouts.pwa.iosStep2Title'),
+      icon: ArrowDown,
+      description: t('layouts.pwa.iosStep2Desc'),
+    },
+    {
+      number: 3,
+      title: t('layouts.pwa.iosStep3Title'),
+      icon: CheckCircle,
+      description: t('layouts.pwa.iosStep3Desc'),
+    },
+  ], [t]);
+
   return (
     <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onDismiss()}>
       <DialogContent className="sm:max-w-md">
         <DialogHeader className="text-left">
           <DialogTitle className="flex items-center gap-2">
             <Share className="w-5 h-5 text-primary" />
-            Add to Home Screen
+            {labels.title}
           </DialogTitle>
           <DialogDescription className="text-left">
-            Install this app on your iPhone for quick access and a better experience
+            {labels.description}
           </DialogDescription>
         </DialogHeader>
 
@@ -85,7 +94,7 @@ export function IOSGuideModal({ onDismiss, open = true }: IOSGuideModalProps) {
         <DialogFooter>
           <Button onClick={onDismiss} variant="default" className="w-full">
             <Check className="w-4 h-4 mr-2" />
-            Got It
+            {labels.gotIt}
           </Button>
         </DialogFooter>
       </DialogContent>

package/src/snippets/PushNotifications/components/PushPrompt.tsx

@@ -8,9 +8,10 @@
  */
 
 import { Bell, X } from 'lucide-react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { Button } from '@djangocfg/ui-core';
 
 import { usePushNotifications } from '../hooks/usePushNotifications';
@@ -66,10 +67,19 @@ export function PushPrompt({
     vapidPublicKey,
     subscribeEndpoint,
   });
+  const t = useTypedT<I18nTranslations>();
 
   const [show, setShow] = useState(false);
   const [enabling, setEnabling] = useState(false);
 
+  const labels = useMemo(() => ({
+    enableNotifications: t('layouts.push.enableNotifications'),
+    stayUpdated: t('layouts.push.stayUpdated'),
+    enable: t('layouts.push.enable'),
+    notNow: t('layouts.push.notNow'),
+    dismiss: t('layouts.push.dismiss'),
+  }), [t]);
+
   // Check if should show
   useEffect(() => {
     // Wait for auth to complete, don't show for unauthenticated users
@@ -132,9 +142,9 @@ export function PushPrompt({
 
           {/* Content */}
           <div className="flex-1 min-w-0">
-            <p className="text-sm font-medium text-white mb-1">Enable notifications</p>
+            <p className="text-sm font-medium text-white mb-1">{labels.enableNotifications}</p>
             <p className="text-xs text-zinc-400 mb-3">
-              Stay updated with important updates and alerts
+              {labels.stayUpdated}
             </p>
 
             {/* Actions */}
@@ -145,14 +155,14 @@ export function PushPrompt({
                 size="sm"
                 variant="default"
               >
-                Enable
+                {labels.enable}
               </Button>
               <Button
                 onClick={handleDismiss}
                 size="sm"
                 variant="ghost"
               >
-                Not now
+                {labels.notNow}
               </Button>
             </div>
           </div>
@@ -163,7 +173,7 @@ export function PushPrompt({
             size="sm"
             variant="ghost"
             className="flex-shrink-0 p-1"
-            aria-label="Dismiss"
+            aria-label={labels.dismiss}
           >
             <X className="w-4 h-4" />
           </Button>