fix: disable admin nav items

Author: blushi

web-marketplace/src/components/organisms/AdminNavigation/AdminNavigation.ListItem.tsx

@@ -0,0 +1,57 @@
+import { useLingui } from '@lingui/react';
+import {
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+} from '@mui/material';
+import _ from 'lodash';
+
+import { cn } from 'web-components/src/utils/styles/cn';
+
+import { AdminNavigationItem } from './AdminNavigation.types';
+import { isSelected } from './AdminNavigation.utils';
+
+type AdminNavigationListItemProps = {
+  onNavItemClick: (sectionName: string) => void;
+  currentPath: string;
+  item: AdminNavigationItem;
+};
+export const AdminNavigationListItem = ({
+  onNavItemClick,
+  currentPath,
+  item,
+}: AdminNavigationListItemProps) => {
+  const { _ } = useLingui();
+
+  return (
+    <ListItem disablePadding className="pb-1">
+      <ListItemButton
+        disableRipple
+        className={cn(
+          'flex p-2',
+          item.disabled
+            ? 'text-bc-neutral-400 cursor-default'
+            : 'cursor-pointer',
+        )}
+        onClick={() => {
+          if (!item.disabled) onNavItemClick(item.path);
+        }}
+        selected={isSelected(item.path, currentPath)}
+        sx={theme => ({
+          '&.Mui-selected, &.Mui-selected:hover': {
+            backgroundColor: theme.palette.info.light,
+            borderRadius: '5px',
+          },
+          '&:hover': {
+            backgroundColor: theme.palette.info.light,
+            borderRadius: '5px',
+          },
+        })}
+      >
+        <ListItemIcon className="min-w-[40px]">{item.icon}</ListItemIcon>
+        <ListItemText className="w-full">{_(item.name)}</ListItemText>
+      </ListItemButton>
+    </ListItem>
+  );
+};

web-marketplace/src/components/organisms/AdminNavigation/AdminNavigation.tsx

@@ -1,3 +1,4 @@
+import { Fragment } from 'react';
 import { useLingui } from '@lingui/react';
 import {
   List,
@@ -8,6 +9,10 @@ import {
   ListSubheader,
 } from '@mui/material';
 
+import InfoTooltip from 'web-components/src/components/tooltip/InfoTooltip';
+import { cn } from 'web-components/src/utils/styles/cn';
+
+import { AdminNavigationListItem } from './AdminNavigation.ListItem';
 import { AdminNavigationSection } from './AdminNavigation.types';
 import { isSelected } from './AdminNavigation.utils';
 
@@ -45,7 +50,7 @@ export const AdminNavigation = ({
           subheader={
             <ListSubheader
               id={`${_(section.heading).toLowerCase()}-list-subheader`}
-              className="bg-transparent text-gray-700 uppercase font-extrabold tracking-wider font-muli"
+              className="bg-transparent text-bc-neutral-400 uppercase font-extrabold tracking-wider font-muli"
               component="div"
               disableSticky
             >
@@ -55,29 +60,25 @@ export const AdminNavigation = ({
           className="mb-15"
         >
           {section.items.map(item => (
-            <ListItem key={_(item.name)} disablePadding className="pb-1">
-              <ListItemButton
-                disableRipple
-                className="flex p-2 cursor-pointer"
-                onClick={() => onNavItemClick(item.path)}
-                selected={isSelected(item.path, currentPath)}
-                sx={theme => ({
-                  '&.Mui-selected, &.Mui-selected:hover': {
-                    backgroundColor: theme.palette.info.light,
-                    borderRadius: '5px',
-                  },
-                  '&:hover': {
-                    backgroundColor: theme.palette.info.light,
-                    borderRadius: '5px',
-                  },
-                })}
-              >
-                <ListItemIcon className="min-w-[40px]">
-                  {item.icon}
-                </ListItemIcon>
-                <ListItemText className="w-full">{_(item.name)}</ListItemText>
-              </ListItemButton>
-            </ListItem>
+            <Fragment key={item.name}>
+              {item.disabled ? (
+                <InfoTooltip title={item.disabledTooltipText} arrow>
+                  <div>
+                    <AdminNavigationListItem
+                      onNavItemClick={onNavItemClick}
+                      currentPath={currentPath}
+                      item={item}
+                    />
+                  </div>
+                </InfoTooltip>
+              ) : (
+                <AdminNavigationListItem
+                  onNavItemClick={onNavItemClick}
+                  currentPath={currentPath}
+                  item={item}
+                />
+              )}
+            </Fragment>
           ))}
         </List>
       ))}

web-marketplace/src/components/organisms/AdminNavigation/AdminNavigation.types.ts

@@ -3,8 +3,10 @@ export type AdminNavigationSection = {
   items: AdminNavigationItem[];
 };
 
-type AdminNavigationItem = {
+export type AdminNavigationItem = {
   name: string;
   icon: JSX.Element;
   path: string;
+  disabledTooltipText?: string | undefined;
+  disabled?: boolean | undefined;
 };

web-marketplace/src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx

@@ -8,33 +8,44 @@ import { ShoppingBagIcon } from 'web-components/src/components/icons/ShoppingBag
 // import { PrefinanceIcon } from 'web-components/src/components/icons/PrefinanceIcon';
 import { UserMenuIcon } from 'web-components/src/components/icons/UserMenuIcon';
 
-import { AdminNavigationSection } from './AdminNavigation.types';
+import { NOT_SUPPORTED_TOOLTIP_TEXT } from 'pages/Dashboard/MyProjects/MyProjects.constants';
+
+import {
+  AdminNavigationItem,
+  AdminNavigationSection,
+} from './AdminNavigation.types';
 
 export const getAdminNavigationSections = ({
   showOrders,
+  loginDisabled,
 }: {
   showOrders?: boolean;
+  loginDisabled?: boolean;
 }): AdminNavigationSection[] => {
   const sections = [
     {
       heading: i18n._(msg`Profile`),
       items: [
         {
           name: i18n._(msg`Edit profile`),
-          icon: <UserMenuIcon linearGradient />,
+          icon: <UserMenuIcon linearGradient disabled={loginDisabled} />,
           path: 'profile',
+          disabled: loginDisabled,
+          disabledTooltipText: i18n._(NOT_SUPPORTED_TOOLTIP_TEXT),
         },
         {
           name: i18n._(msg`Settings`),
-          icon: <CogIcon linearGradient />,
+          icon: <CogIcon linearGradient disabled={loginDisabled} />,
           path: 'settings',
+          disabled: loginDisabled,
+          disabledTooltipText: i18n._(NOT_SUPPORTED_TOOLTIP_TEXT),
         },
         // {
         //   name: i18n._(msg`Email updates`),
         //   icon: <EnvelopeIcon linearGradient />,
         //   path: 'email-updates',
         // },
-      ],
+      ] as AdminNavigationItem[],
     },
   ];
 

web-marketplace/src/lib/i18n/locales/en.po

@@ -1295,6 +1295,10 @@ msgstr ""
 msgid "Credit card not available for this project"
 msgstr ""
 
+#: src/pages/Orders/Orders.CreditCardHidden.tsx:8
+msgid "Credit card orders are hidden"
+msgstr ""
+
 #: src/components/organisms/CreditBatches/CreditBatches.config.ts:19
 #: src/lib/constants/shared.constants.tsx:197
 msgid "credit class"
@@ -1788,7 +1792,7 @@ msgstr ""
 msgid "edit profile"
 msgstr ""
 
-#: src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx:23
+#: src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx:30
 #: src/components/organisms/RolesForm/components/ProfileModal/ProfileModal.tsx:115
 #: src/pages/Dashboard/Dashboard.constants.tsx:54
 msgid "Edit profile"
@@ -2597,7 +2601,7 @@ msgstr ""
 msgid "Must have recipients"
 msgstr ""
 
-#: src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx:46
+#: src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx:57
 #: src/pages/Dashboard/Dashboard.constants.tsx:79
 msgid "My orders"
 msgstr ""
@@ -2798,7 +2802,7 @@ msgstr ""
 msgid "orders"
 msgstr ""
 
-#: src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx:43
+#: src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx:54
 msgid "Orders"
 msgstr ""
 
@@ -3110,7 +3114,7 @@ msgstr ""
 msgid "profile"
 msgstr ""
 
-#: src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx:20
+#: src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx:27
 #: src/pages/ProfileEdit/ProfileEdit.constants.tsx:8
 msgid "Profile"
 msgstr ""
@@ -3794,7 +3798,7 @@ msgstr ""
 msgid "settings"
 msgstr ""
 
-#: src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx:28
+#: src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx:37
 #: src/pages/Dashboard/Dashboard.constants.tsx:62
 #: src/pages/Settings/Settings.tsx:52
 msgid "Settings"
@@ -4243,6 +4247,10 @@ msgstr ""
 msgid "This factor is used to calculate the credits issued for this project."
 msgstr ""
 
+#: src/pages/Orders/Orders.CreditCardHidden.tsx:11
+msgid "This feature is not yet supported by Wallet Connect and Keplr mobile. Please log in using Keplr browser extension on desktop or via email or Google login."
+msgstr ""
+
 #: src/lib/constants/shared.constants.tsx:63
 msgid "This field is required"
 msgstr ""

web-marketplace/src/lib/i18n/locales/es.po

@@ -1298,6 +1298,10 @@ msgstr "Tarjeta de crédito"
 msgid "Credit card not available for this project"
 msgstr "Tarjeta de crédito no disponible para este proyecto"
 
+#: src/pages/Orders/Orders.CreditCardHidden.tsx:8
+msgid "Credit card orders are hidden"
+msgstr "Los pedidos con tarjeta de crédito están ocultos"
+
 #: src/components/organisms/CreditBatches/CreditBatches.config.ts:19
 #: src/lib/constants/shared.constants.tsx:197
 msgid "credit class"
@@ -1791,7 +1795,7 @@ msgstr "Editar filtros"
 msgid "edit profile"
 msgstr "editar perfil"
 
-#: src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx:23
+#: src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx:30
 #: src/components/organisms/RolesForm/components/ProfileModal/ProfileModal.tsx:115
 #: src/pages/Dashboard/Dashboard.constants.tsx:54
 msgid "Edit profile"
@@ -2600,7 +2604,7 @@ msgstr "Debe ser positivo"
 msgid "Must have recipients"
 msgstr "Debe tener destinatarios"
 
-#: src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx:46
+#: src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx:57
 #: src/pages/Dashboard/Dashboard.constants.tsx:79
 msgid "My orders"
 msgstr "Mis pedidos"
@@ -2801,7 +2805,7 @@ msgstr "Resumen del pedido"
 msgid "orders"
 msgstr "órdenes"
 
-#: src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx:43
+#: src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx:54
 msgid "Orders"
 msgstr "Pedidos"
 
@@ -3113,7 +3117,7 @@ msgstr "Proceda con precaución: ¡esto no se puede deshacer!"
 msgid "profile"
 msgstr "perfil"
 
-#: src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx:20
+#: src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx:27
 #: src/pages/ProfileEdit/ProfileEdit.constants.tsx:8
 msgid "Profile"
 msgstr "Perfil"
@@ -3797,7 +3801,7 @@ msgstr "Configurar una billetera Keplr →"
 msgid "settings"
 msgstr "ajustes"
 
-#: src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx:28
+#: src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx:37
 #: src/pages/Dashboard/Dashboard.constants.tsx:62
 #: src/pages/Settings/Settings.tsx:52
 msgid "Settings"
@@ -4246,6 +4250,10 @@ msgstr "Estos datos están en cadena o anclados en la cadena a través de un has
 msgid "This factor is used to calculate the credits issued for this project."
 msgstr "Este factor se utiliza para calcular los créditos emitidos para este proyecto."
 
+#: src/pages/Orders/Orders.CreditCardHidden.tsx:11
+msgid "This feature is not yet supported by Wallet Connect and Keplr mobile. Please log in using Keplr browser extension on desktop or via email or Google login."
+msgstr "Esta función aún no es compatible con Wallet Connect y Keplr Mobile. Inicie sesión con la extensión de navegador de Keplr en su computadora de escritorio o a través de correo electrónico o inicio de sesión de Google."
+
 #: src/lib/constants/shared.constants.tsx:63
 msgid "This field is required"
 msgstr "Este campo es obligatorio"

web-marketplace/src/pages/Orders/Orders.CreditCardHidden.tsx

@@ -3,11 +3,11 @@ import { Trans } from '@lingui/macro';
 import { Body, Title } from 'web-components/src/components/typography';
 
 export const CreditCardHidden = () => (
-  <div className="mb-20 lg:mb-30 bg-orange-gradient p-20 pl-[12px] rounded-lg border-solid border border-l-8 border-bc-orange-300">
+  <div className="mb-20 bg-orange-gradient p-20 pl-[12px] rounded-lg border-solid border border-l-8 border-bc-orange-300">
     <Title variant="h6" className="text-base">
       <Trans>Credit card orders are hidden</Trans>
     </Title>
-    <Body size="md">
+    <Body size="sm" mobileSize="sm">
       <Trans>
         This feature is not yet supported by Wallet Connect and Keplr mobile.
         Please log in using Keplr browser extension on desktop or via email or

web-marketplace/src/pages/ProfileEdit/ProfileEdit.tsx

@@ -30,7 +30,7 @@ import { ViewProfileButton } from './ProfileEdit.ViewProfile';
 
 export const ProfileEdit = () => {
   const { _ } = useLingui();
-  const { accountChanging } = useWallet();
+  const { accountChanging, loginDisabled } = useWallet();
   const { loading } = useAuth();
   const showOrders = useShowOrders();
 
@@ -70,7 +70,7 @@ export const ProfileEdit = () => {
       <div className="flex flex-col justify-start items-center lg:items-start lg:flex-row lg:justify-evenly max-w-[1150px] mx-auto p-10 lg:py-50 lg:px-15 lg:min-h-screen">
         <AdminNavigation
           className="hidden lg:block min-w-[235px]"
-          sections={getAdminNavigationSections({ showOrders })}
+          sections={getAdminNavigationSections({ showOrders, loginDisabled })}
           onNavItemClick={onNavClick}
           currentPath={pathname}
           savedPaymentInfo={