Merge pull request #4037 from JoinColony/feat/16220651-navigation-streaming-payments

Feat/16220651 navigation streaming payments

Author: adam-strzelec

src/components/frame/v5/pages/StreamingPaymentsPage/StreamingPaymentsPage.tsx

@@ -12,9 +12,7 @@ import StatsCards from './partials/StatsCards/StatsCards.tsx';
 const displayName = 'v5.pages.StreamingPaymentsPage';
 
 const StreamingPaymentsPage = () => {
-  useSetPageHeadingTitle(
-    formatText({ id: 'navigation.finances.streamingPayments' }),
-  );
+  useSetPageHeadingTitle(formatText({ id: 'streamingPaymentsPage.title' }));
 
   const nativeDomainId = useGetSelectedDomainFilter()?.nativeId;
 

src/components/v5/common/ActionSidebar/partials/PaymentGroup/GroupList.ts

@@ -7,6 +7,7 @@ import {
   ArrowsOutLineHorizontal,
   // @TODO: uncomment when staged payment is ready
   Steps,
+  Waves,
   type Icon,
 } from '@phosphor-icons/react';
 
@@ -40,16 +41,15 @@ export const GROUP_LIST: GroupListItem[] = [
     action: Action.PaymentBuilder,
     isNew: true,
   },
-  // @TODO: uncomment when streaming payment is ready
-  // {
-  //   title: formatText({ id: 'actions.streamingPayment' }),
-  //   description: formatText({
-  //     id: 'actions.description.streamingPayment',
-  //   }),
-  //   Icon: Waves,
-  //   action: Action.StreamingPayment,
-  //   isNew: true,
-  // },
+  {
+    title: formatText({ id: 'actions.streamingPayment' }),
+    description: formatText({
+      id: 'actions.description.streamingPayment',
+    }),
+    Icon: Waves,
+    action: Action.StreamingPayment,
+    isNew: true,
+  },
   {
     title: formatText({ id: 'actions.splitPayment' }),
     description: formatText({ id: 'actions.description.splitPayment' }),

src/components/v5/shared/Navigation/Sidebar/sidebars/ColonyPageSidebar/consts.ts

@@ -19,6 +19,7 @@ import {
   COLONY_INCOMING_ROUTE,
   COLONY_PERMISSIONS_ROUTE,
   COLONY_TEAMS_ROUTE,
+  COLONY_STREAMING_PAYMENTS_ROUTE,
 } from '~routes';
 import { type SidebarRouteItemProps } from '~v5/shared/Navigation/Sidebar/partials/SidebarRouteItem/types.ts';
 
@@ -51,6 +52,11 @@ export const sidebarNavigationScheme: SidebarRouteItemProps[] = [
         path: COLONY_INCOMING_ROUTE,
         isColonyRoute: true,
       },
+      {
+        translation: { id: 'navigation.finances.streamingPayments' },
+        path: COLONY_STREAMING_PAYMENTS_ROUTE,
+        isColonyRoute: true,
+      },
       // @TODO: Uncomment once these pages are available
       // {
       //   id: 'streaming',

src/components/v5/shared/Navigation/Sidebar/sidebars/ColonyPageSidebar/partials/SidebarRoutesSection.tsx

@@ -2,9 +2,11 @@ import React from 'react';
 
 import SidebarRouteItem from '~v5/shared/Navigation/Sidebar/partials/SidebarRouteItem/index.ts';
 
-import { sidebarNavigationScheme } from '../consts.ts';
+import { useSidebarRoutesScheme } from './hooks.ts';
 
 export const SidebarRoutesSection = () => {
+  const { sidebarScheme: sidebarNavigationScheme } = useSidebarRoutesScheme();
+
   return (
     <section className="flex w-full flex-col gap-0 md:gap-0.5">
       {sidebarNavigationScheme.map((scheme) => (

src/components/v5/shared/Navigation/Sidebar/sidebars/ColonyPageSidebar/partials/hooks.ts

@@ -0,0 +1,52 @@
+import { Extension } from '@colony/colony-js';
+
+import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts';
+import { useSearchActionsQuery } from '~gql';
+import useExtensionData from '~hooks/useExtensionData.ts';
+import { COLONY_STREAMING_PAYMENTS_ROUTE } from '~routes';
+import { isInstalledExtensionData } from '~utils/extensions.ts';
+
+import { sidebarNavigationScheme } from '../consts.ts';
+
+export const useSidebarRoutesScheme = () => {
+  const { colony } = useColonyContext();
+
+  const { colonyAddress } = colony;
+
+  const { data } = useSearchActionsQuery({
+    variables: {
+      filter: {
+        colonyId: { eq: colonyAddress },
+        type: { eq: 'CREATE_STREAMING_PAYMENT' },
+      },
+      limit: 5,
+    },
+  });
+
+  const excludeSubitemsPaths = (subitemsPathsToExclude: string[]) =>
+    sidebarNavigationScheme.map((item) => {
+      return {
+        ...item,
+        subItems: item.subItems?.filter(
+          (subItem) => !subitemsPathsToExclude.includes(subItem.path),
+        ),
+      };
+    });
+
+  const hasStreamings = !!data?.searchColonyActions?.items.length;
+
+  const { extensionData } = useExtensionData(Extension.StreamingPayments);
+  const isStreamingPaymentsInstalled =
+    extensionData && isInstalledExtensionData(extensionData);
+
+  const isStreamingsRouteVisible =
+    isStreamingPaymentsInstalled || hasStreamings;
+
+  const sidebarScheme = excludeSubitemsPaths(
+    isStreamingsRouteVisible ? [] : [COLONY_STREAMING_PAYMENTS_ROUTE],
+  );
+
+  return {
+    sidebarScheme,
+  };
+};

src/i18n/en.json

@@ -32,7 +32,7 @@
     "navigation.finances.incoming": "Incoming",
     "navigation.finances.incomingFunds": "Incoming funds",
     "navigation.finances.transactions": "Transactions",
-    "navigation.finances.streamingPayments": "Streaming payments",
+    "navigation.finances.streamingPayments": "Streaming",
     "navigation.agreements": "Agreements",
     "navigation.agreements.title": "Agreements",
     "navigation.agreements.description": "The latest decisions and discussions created within the Colony.",
@@ -1965,6 +1965,7 @@
     "form.max": "{fieldName} must be a maximum of {length} characters",
     "multiSig.rejectAction": "Reject action",
     "multiSig.shareAction": "Share action",
+    "streamingPaymentsPage.title": "Streaming payments",
     "streamingPayment.description.placeholder": "Streaming Payment to a single recipient by {initiator}",
     "streamingPayment.description.days": "{days} {days, plural, =1 {day} other {days}}",
     "streamingPayment.status.active": "Active",

src/routes/routeConstants.ts

@@ -25,7 +25,7 @@ export const COLONY_EXTENSION_DETAILS_ROUTE = `${COLONY_EXTENSIONS_ROUTE}/:exten
 export const COLONY_INCOMING_ROUTE = `incoming`;
 export const COLONY_BALANCES_ROUTE = `balances`;
 export const COLONY_FOLLOWERS_ROUTE = `members/followers`;
-export const COLONY_STREAMING_PAYMENTS_ROUTE = `streaming-payments`;
+export const COLONY_STREAMING_PAYMENTS_ROUTE = `streaming`;
 export const COLONY_MEMBERS_ROUTE = `members`;
 export const COLONY_MEMBERS_WITH_DOMAIN_ROUTE = `members/:domainId`;
 export const COLONY_VERIFIED_ROUTE = `verified`;