Merge pull request 'fix: resolve {{count}} interpolation and add notification bell for parapharmacy products' (#50) from fix/parapharmacy-i18n-interpolation-and-bell into main

Reviewed-on: #50

apps/frontend-mobile/src/i18n/LanguageContext.jsx

@@ -36,8 +36,14 @@ export function LanguageProvider({ children }) {
     AsyncStorage.setItem(STORAGE_KEY, newLang).catch(() => {});
   }, []);
 
-  const t = useCallback((key) => {
-    return locales[lang]?.[key] || locales.es[key] || key;
+  const t = useCallback((key, params) => {
+    let str = locales[lang]?.[key] || locales.es[key] || key;
+    if (params && typeof str === 'string') {
+      Object.keys(params).forEach((k) => {
+        str = str.replace(new RegExp(`\\{\\{${k}\\}\\}`, 'g'), params[k]);
+      });
+    }
+    return str;
   }, [lang]);
 
   const value = useMemo(() => ({ lang, setLang, t, ready }), [lang, setLang, t, ready]);

apps/frontend/src/App.jsx

@@ -195,6 +195,8 @@ function App() {
           source={productScreen?.source}
           id={productScreen?.id}
           onBack={() => { setProductScreen(null); setScreen('search'); }}
+          currentUser={currentUser}
+          onLoginRequest={() => setShowLogin(true)}
         />
       );
       break;

apps/frontend/src/i18n/LanguageContext.jsx

@@ -26,8 +26,14 @@ export function LanguageProvider({ children }) {
     } catch {}
   }, []);
 
-  const t = useCallback((key) => {
-    return locales[lang]?.[key] || locales.es[key] || key;
+  const t = useCallback((key, params) => {
+    let str = locales[lang]?.[key] || locales.es[key] || key;
+    if (params && typeof str === 'string') {
+      Object.keys(params).forEach((k) => {
+        str = str.replace(new RegExp(`\\{\\{${k}\\}\\}`, 'g'), params[k]);
+      });
+    }
+    return str;
   }, [lang]);
 
   const value = useMemo(() => ({ lang, setLang, t }), [lang, setLang, t]);

apps/frontend/src/views/ProductView.jsx

@@ -5,7 +5,7 @@ import { haversineKm, getUserPosition, hasCachedPosition } from '../utils/geo';
 import { useTranslation } from '../i18n';
 import './ProductView.css';
 
-export default function ProductView({ source, id, onBack }) {
+export default function ProductView({ source, id, onBack, currentUser, onLoginRequest }) {
   const { t } = useTranslation();
   const [product, setProduct] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -196,10 +196,6 @@ export default function ProductView({ source, id, onBack }) {
           <div className="pharmacies-loading">{t('productView.loadingPharmacies')}</div>
         ) : pharmacies.length > 0 ? (
           <>
-            <h3 className="pharmacies-title">
-              {t('productView.availableInPharmacies', { count: pharmacies.length })}
-            </h3>
-
             <div className="pharmacy-controls">
               <button
                 className={`sort-distance-button ${sortByDistance ? 'active' : ''}`}
@@ -231,6 +227,9 @@ export default function ProductView({ source, id, onBack }) {
               pharmacies={displayedPharmacies}
               loading={loadingPharmacies}
               userPosition={sortByDistance ? userPosition : null}
+              medicine={product}
+              currentUser={currentUser}
+              onLoginRequest={onLoginRequest}
             />
           </>
         ) : null}