Fix hook error and add PWA install translations and localize InstallApp (#352)

* Fix hook error and add PWA install translations and localize InstallApp

* Removed duplicated locales

* Unified component

* Unified component

* Unified component

* Add useIsPwa hook

* Refactor DownloadAppDrawer to use children prop and remove InstallApp component

* Fix lint warnings and minor issues

---------

Co-authored-by: krokosik <[email protected]>

Author: marcosinigaglia

src/components/Account/DownloadAppDrawer.tsx

@@ -0,0 +1,59 @@
+import { useTranslation } from 'next-i18next';
+import { type ReactNode } from 'react';
+
+import { useIsPwa } from '~/hooks/useIsPwa';
+import { AppDrawer } from '../ui/drawer';
+
+interface DownloadAppDrawerProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export const DownloadAppDrawer: React.FC<DownloadAppDrawerProps> = ({ children, className }) => {
+  const { t } = useTranslation('account_page');
+  const isStandalone = useIsPwa();
+
+  if (isStandalone) {
+    return null;
+  }
+
+  return (
+    <AppDrawer
+      trigger={children}
+      leftAction={t('ui.actions.close', { ns: 'common' })}
+      title={t('ui.download_app_details.title')}
+      className={className ?? 'h-[70vh]'}
+      shouldCloseOnAction
+    >
+      <div className="flex flex-col gap-8">
+        <p>{t('ui.download_app_details.download_as_pwa')}</p>
+
+        <p>
+          {t('ui.download_app_details.using_ios')}{' '}
+          <a
+            className="text-cyan-500 underline"
+            href="https://youtube.com/shorts/MQHeLOjr350"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {t('ui.download_app_details.video')}
+          </a>
+        </p>
+
+        <p>
+          {t('ui.download_app_details.using_android')}{' '}
+          <a
+            className="text-cyan-500 underline"
+            href="https://youtube.com/shorts/04n7oKGzgOs"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {t('ui.download_app_details.video')}
+          </a>
+        </p>
+      </div>
+    </AppDrawer>
+  );
+};
+
+export default DownloadAppDrawer;

src/components/InstallApp.tsx

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+
+export function useIsPwa(): boolean {
+  const [isPwa, setIsPwa] = useState(false);
+
+  useEffect(() => {
+    try {
+      const isIOSStandalone =
+        typeof navigator !== 'undefined' && 'standalone' in navigator
+          ? !!navigator.standalone
+          : false;
+
+      const isDisplayModeStandalone =
+        typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+          ? window.matchMedia('(display-mode: standalone)').matches
+          : false;
+
+      setIsPwa(isIOSStandalone || isDisplayModeStandalone);
+    } catch {
+      setIsPwa(false);
+    }
+  }, []);
+
+  return isPwa;
+}

src/hooks/useIsPwa.ts

@@ -21,7 +21,7 @@ import { UpdateName } from '~/components/Account/UpdateName';
 import MainLayout from '~/components/Layout/MainLayout';
 import { EntityAvatar } from '~/components/ui/avatar';
 import { Button } from '~/components/ui/button';
-import { AppDrawer } from '~/components/ui/drawer';
+import DownloadAppDrawer from '~/components/Account/DownloadAppDrawer';
 import { LoadingSpinner } from '~/components/ui/spinner';
 import { env } from '~/env';
 import { type NextPageWithUser } from '~/types';
@@ -196,41 +196,7 @@ const AccountPage: NextPageWithUser<{ isCloud: boolean; feedBackPossible: boolea
               <ChevronRight className="h-6 w-6 text-gray-500" />
             </Button>
           </Link>
-          <AppDrawer
-            trigger={downloadAppButton}
-            leftAction={t('ui.actions.close', { ns: 'common' })}
-            title={t('ui.download_app_details.title')}
-            className="h-[70vh]"
-            shouldCloseOnAction
-          >
-            <div className="flex flex-col gap-8">
-              <p>{t('ui.download_app_details.download_as_pwa')}</p>
-
-              <p>
-                {t('ui.download_app_details.using_ios')}{' '}
-                <a
-                  className="text-cyan-500 underline"
-                  href="https://youtube.com/shorts/MQHeLOjr350"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  {t('ui.download_app_details.video')}
-                </a>
-              </p>
-
-              <p>
-                {t('ui.download_app_details.using_android')}{' '}
-                <a
-                  className="text-cyan-500 underline"
-                  href="https://youtube.com/shorts/04n7oKGzgOs"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  {t('ui.download_app_details.video')}
-                </a>
-              </p>
-            </div>
-          </AppDrawer>
+          <DownloadAppDrawer>{downloadAppButton}</DownloadAppDrawer>
           <Button
             variant="ghost"
             className="text-md hover:text-foreground/80 w-full justify-between px-0"

src/pages/account.tsx

@@ -1,21 +1,23 @@
 import { ArrowUpOnSquareIcon } from '@heroicons/react/24/outline';
-import { PlusIcon } from 'lucide-react';
+import { Download, PlusIcon } from 'lucide-react';
 import { useTranslation } from 'next-i18next';
 import Head from 'next/head';
 import Link from 'next/link';
 import { useCallback } from 'react';
+import DownloadAppDrawer from '~/components/Account/DownloadAppDrawer';
 import { BalanceEntry } from '~/components/Expense/BalanceEntry';
-import InstallApp from '~/components/InstallApp';
 import MainLayout from '~/components/Layout/MainLayout';
 import { NotificationModal } from '~/components/NotificationModal';
 import { Button } from '~/components/ui/button';
+import { useIsPwa } from '~/hooks/useIsPwa';
 import { type NextPageWithUser } from '~/types';
 import { api } from '~/utils/api';
 import { withI18nStaticProps } from '~/utils/i18n/server';
 import { toUIString } from '~/utils/numbers';
 
 const BalancePage: NextPageWithUser = () => {
   const { t } = useTranslation();
+  const isPwa = useIsPwa();
   const balanceQuery = api.expense.getBalances.useQuery();
 
   const shareWithFriends = useCallback(() => {
@@ -117,8 +119,13 @@ const BalancePage: NextPageWithUser = () => {
 
             {!balanceQuery.isPending && !balanceQuery.data?.balances.length ? (
               <div className="mt-[40vh] flex -translate-y-[130%] flex-col items-center justify-center gap-6">
-                <InstallApp />
-
+                <DownloadAppDrawer>
+                  <Button className="w-[250px]">
+                    <Download className="mr-2 h-5 w-5 text-black" />
+                    {t('account_page:ui.download_app')}
+                  </Button>
+                </DownloadAppDrawer>
+                {!isPwa && <p>{t('ui.or', { ns: 'common' })}</p>}
                 <Link href="/add">
                   <Button className="w-[250px]">
                     <PlusIcon className="mr-2 h-5 w-5 text-black" />
@@ -136,6 +143,6 @@ const BalancePage: NextPageWithUser = () => {
 
 BalancePage.auth = true;
 
-export const getStaticProps = withI18nStaticProps(['common']);
+export const getStaticProps = withI18nStaticProps(['common', 'account_page']);
 
 export default BalancePage;