refactor: update grant-impact route and cta text

src/grants/components/grant-list/apply-button.tsx

@@ -6,13 +6,14 @@ import { openNewTab } from '@/shared/utils/open-new-tab';
 
 interface Props {
   url: string | null;
+  text?: string;
 }
 
 /**
  * Need to implement this as button (instead of link) to avoid nested links
  * Parent card is already a link, so it'll throw react minification error
  */
-export const ApplyButton = ({ url }: Props) => {
+export const ApplyButton = ({ url, text = 'Apply' }: Props) => {
   if (!url) return null;
 
   const onClick: React.MouseEventHandler = (e) => {
@@ -26,7 +27,7 @@ export const ApplyButton = ({ url }: Props) => {
       className="is-active mx-auto w-full font-semibold text-black"
       onClick={onClick}
     >
-      <span>Apply</span>
+      <span>{text}</span>
     </Button>
   );
 };

src/grants/components/grant-list/grant-list-item.tsx

@@ -2,6 +2,7 @@ import Link from 'next/link';
 
 import { Avatar } from '@nextui-org/react';
 
+import { ROUTE_SECTIONS } from '@/shared/core/constants';
 import { cn } from '@/shared/utils/cn';
 import { getLogoUrl } from '@/shared/utils/get-logo-url';
 
@@ -17,9 +18,10 @@ import { CaretRightIcon } from '@/grants/components/ui/icons/caret-right-icon';
 interface Props {
   grant: Grant;
   isLink?: boolean;
+  ctaText?: string;
 }
 
-export const GrantListItem = ({ grant, isLink = true }: Props) => {
+export const GrantListItem = ({ grant, isLink = true, ctaText }: Props) => {
   // TODO: JOB-679
 
   const {
@@ -94,7 +96,7 @@ export const GrantListItem = ({ grant, isLink = true }: Props) => {
         </div>
       </div>
       <div className="flex w-full items-center justify-end gap-4 pt-6 lg:max-w-[180px] lg:pt-0">
-        <ApplyButton url={url} />
+        <ApplyButton url={url} text={ctaText} />
 
         <div className="hidden lg:flex">
           <CaretRightIcon />
@@ -107,7 +109,7 @@ export const GrantListItem = ({ grant, isLink = true }: Props) => {
     return (
       <Link
         prefetch
-        href={`/grants/${slug}`}
+        href={`/${ROUTE_SECTIONS.GRANT_IMPACT}/${slug}`}
         className={wrapperClassName}
         data-uuid={slug}
         data-testid={GRANT_TEST_IDS.GRANT_ITEM}

src/grants/components/grant-list/grant-list-items.tsx

@@ -14,10 +14,12 @@ interface Props {
   hasNextPage: boolean;
   isPending: boolean;
   isLink?: boolean;
+  ctaText?: string;
 }
 
 export const GrantListItems = (props: Props) => {
-  const { grants, error, inViewRef, hasNextPage, isPending, isLink } = props;
+  const { grants, error, inViewRef, hasNextPage, isPending, isLink, ctaText } =
+    props;
 
   const lastItem = useMemo(() => {
     if (error) return <p>Error: {error.message}</p>;
@@ -42,7 +44,11 @@ export const GrantListItems = (props: Props) => {
       <VirtualWrapper count={grants.length}>
         {(index) => (
           <div className="pt-6 lg:pt-8">
-            <GrantListItem grant={grants[index]} isLink={isLink} />
+            <GrantListItem
+              grant={grants[index]}
+              isLink={isLink}
+              ctaText={ctaText}
+            />
           </div>
         )}
       </VirtualWrapper>

src/grants/components/grant-list/grant-list.tsx

@@ -6,7 +6,7 @@ import { useGrantList } from './use-grant-list';
 
 export const FetchedGrantList = () => {
   const props = useGrantList('inactive');
-  return <GrantListItems {...props} />;
+  return <GrantListItems {...props} ctaText="View Program" />;
 };
 
 export const GrantList = () => {

src/grants/components/grantee-card/grantee-card.stories.tsx

@@ -1,5 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
+import { ROUTE_SECTIONS } from '@/shared/core/constants';
+
 import {
   MockInfiniteQueryResult,
   MockQueryResult,
@@ -30,7 +32,7 @@ const meta: Meta<typeof GranteeCard> = {
   parameters: {
     nextjs: {
       navigation: {
-        pathname: `/grants/${grantId}`,
+        pathname: `/${ROUTE_SECTIONS.GRANT_IMPACT}/${grantId}`,
         segments: [['grantId', grantId]],
       },
     },

src/grants/components/grantee-list/item/client-wrapper.tsx

@@ -3,6 +3,7 @@
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
 
+import { ROUTE_SECTIONS } from '@/shared/core/constants';
 import { cn } from '@/shared/utils/cn';
 
 import { GRANT_TEST_IDS } from '@/grants/core/constants';
@@ -22,7 +23,7 @@ export const ClientWrapper = ({
 }: Props) => {
   const params = useParams();
 
-  const href = `/grants/${params.grantId}/grantees/${granteeId}`;
+  const href = `/${ROUTE_SECTIONS.GRANT_IMPACT}/${params.grantId}/grantees/${granteeId}`;
   const isActive = isActiveBypass || params.granteeId === granteeId;
 
   return (

src/grants/components/project-selections/project-selections.stories.tsx

@@ -2,6 +2,8 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { faker } from '@faker-js/faker';
 
+import { ROUTE_SECTIONS } from '@/shared/core/constants';
+
 import {
   MockInfiniteQueryResult,
   MockQueryResult,
@@ -34,7 +36,7 @@ const meta: Meta<typeof ProjectSelections> = {
   parameters: {
     nextjs: {
       navigation: {
-        pathname: `/grants/${grantId}`,
+        pathname: `/${ROUTE_SECTIONS.GRANT_IMPACT}/${grantId}`,
         segments: [['grantId', grantId]],
       },
     },

src/grants/components/project-selections/project-selections.tsx

@@ -2,6 +2,8 @@
 
 import { useParams } from 'next/navigation';
 
+import { ROUTE_SECTIONS } from '@/shared/core/constants';
+
 import { useGranteeFetch } from '@/grants/hooks/use-grantee-fetch';
 import { TabSelectionsSkeleton } from '@/grants/components/tab-selections-skeleton';
 
@@ -33,7 +35,7 @@ export const ProjectSelections = () => {
   if (errorMessage) return null;
   if (!granteeData?.data) return null;
 
-  const baseHref = `/grants/${grantId}/grantees/${granteeData.data.slug}/projects`;
+  const baseHref = `/${ROUTE_SECTIONS.GRANT_IMPACT}/${grantId}/grantees/${granteeData.data.slug}/projects`;
 
   return (
     <div className={WRAPPER_CLASSNAME}>

src/grants/components/project-stats/project-stats.stories.tsx

@@ -2,6 +2,8 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { faker } from '@faker-js/faker';
 
+import { ROUTE_SECTIONS } from '@/shared/core/constants';
+
 import {
   MockInfiniteQueryResult,
   MockQueryResult,
@@ -34,7 +36,7 @@ const meta: Meta<typeof GranteeProjectStats> = {
   parameters: {
     nextjs: {
       navigation: {
-        pathname: `/grants/${grantId}`,
+        pathname: `/${ROUTE_SECTIONS.GRANT_IMPACT}/${grantId}`,
         segments: [['grantId', grantId]],
       },
     },

src/grants/components/project-tab-selections/project-tab-selection.stories.tsx

@@ -2,6 +2,8 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { faker } from '@faker-js/faker';
 
+import { ROUTE_SECTIONS } from '@/shared/core/constants';
+
 import {
   MockInfiniteQueryResult,
   MockQueryResult,
@@ -34,7 +36,7 @@ const meta: Meta<typeof ProjectTabSelection> = {
   parameters: {
     nextjs: {
       navigation: {
-        pathname: `/grants/${grantId}`,
+        pathname: `/${ROUTE_SECTIONS.GRANT_IMPACT}/${grantId}`,
         segments: [['grantId', grantId]],
       },
     },

src/grants/components/project-tab-selections/project-tab-selection.tsx

@@ -5,6 +5,8 @@ import { useParams } from 'next/navigation';
 
 import { cn } from '@nextui-org/react';
 
+import { ROUTE_SECTIONS } from '@/shared/core/constants';
+
 import { useGranteeFetch } from '@/grants/hooks/use-grantee-fetch';
 import { TabSelectionsSkeleton } from '@/grants/components/tab-selections-skeleton';
 
@@ -42,7 +44,7 @@ export const ProjectTabSelection = () => {
 
   if (!currentProject?.tabs?.length) return null;
 
-  const baseHref = `/grants/${grantId}/grantees/${granteeData.data.slug}/projects`;
+  const baseHref = `/${ROUTE_SECTIONS.GRANT_IMPACT}/${grantId}/grantees/${granteeData.data.slug}/projects`;
 
   const activeTab = tab || currentProject.tabs[0].tab;
 

src/grants/components/ui/grantee-funding-items.tsx

@@ -18,7 +18,7 @@ const createFundingItems = ({
     icon: <PaperbillIcon />,
     label: 'Last Funding:',
     value: (
-      <DetailValueText>{`$${formatNumber(lastFundingAmount)} ${lastFundingUnit}`}</DetailValueText>
+      <DetailValueText>{`${formatNumber(lastFundingAmount)} ${lastFundingUnit}`}</DetailValueText>
     ),
   },
   ...conditionalItem(!!lastFundingDate, {

src/grants/core/schemas.ts

@@ -107,7 +107,7 @@ export const granteeItemSchema = z.object({
   logoUrl: z.string().nullable(),
   lastFundingDate: z.number().nullable(),
   lastFundingAmount: z.number(),
-  lastFundingUnit: z.string(),
+  lastFundingUnit: z.string().optional(),
 });
 export type GranteeItem = z.infer<typeof granteeItemSchema>;
 

src/grants/pages/grant-page-layout/grant-page-layout.tsx

@@ -1,5 +1,7 @@
 import dynamic from 'next/dynamic';
 
+import { HREFS } from '@/shared/core/constants';
+
 import { Grant } from '@/grants/core/schemas';
 import { GrantBackButton } from '@/grants/components/grant-back-button';
 
@@ -24,7 +26,7 @@ export const GrantPageLayout = ({ list, grant, children }: Props) => {
     <div className="flex flex-col gap-6 px-4 pt-[56px] md:pt-20 lg:px-0 lg:pt-0">
       <GrantCard
         grant={grant}
-        backButton={<GrantBackButton fallbackUrl="/grants" />}
+        backButton={<GrantBackButton fallbackUrl={HREFS.GRANT_IMPACT_PAGE} />}
       />
 
       <div className="lg:pr-8">

src/grants/pages/route-stories/[grantId].stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { faker } from '@faker-js/faker';
 
+import { ROUTE_SECTIONS } from '@/shared/core/constants';
 import { NavLayout } from '@/shared/components/nav-space-layout';
 
 import {
@@ -50,7 +51,7 @@ const meta: Meta<typeof Component> = {
   parameters: {
     nextjs: {
       navigation: {
-        pathname: `/grants/${grantId}`,
+        pathname: `/${ROUTE_SECTIONS.GRANT_IMPACT}/${grantId}`,
         segments: [['grantId', grantId]],
       },
     },

src/grants/pages/route-stories/[granteeId].stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { faker } from '@faker-js/faker';
 
+import { ROUTE_SECTIONS } from '@/shared/core/constants';
 import { NavLayout } from '@/shared/components/nav-space-layout';
 
 import {
@@ -49,7 +50,7 @@ const meta: Meta<typeof Component> = {
   parameters: {
     nextjs: {
       navigation: {
-        pathname: `/grants/${grantId}/grantees/${granteeId}`,
+        pathname: `/${ROUTE_SECTIONS.GRANT_IMPACT}/${grantId}/grantees/${granteeId}`,
         segments: [
           ['grantId', grantId],
           ['granteeId', granteeId],

src/grants/pages/route-stories/[projectId].stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { faker } from '@faker-js/faker';
 
+import { ROUTE_SECTIONS } from '@/shared/core/constants';
 import { NavLayout } from '@/shared/components/nav-space-layout';
 
 import {
@@ -48,7 +49,7 @@ const meta: Meta<typeof Component> = {
   parameters: {
     nextjs: {
       navigation: {
-        pathname: `/grants/${grantId}/grantees/${granteeId}/projects/${projectId}`,
+        pathname: `/${ROUTE_SECTIONS.GRANT_IMPACT}/${grantId}/grantees/${granteeId}/projects/${projectId}`,
         segments: [
           ['grantId', grantId],
           ['granteeId', granteeId],

src/grants/pages/route-stories/[tab].stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { faker } from '@faker-js/faker';
 
+import { ROUTE_SECTIONS } from '@/shared/core/constants';
 import { NavLayout } from '@/shared/components/nav-space-layout';
 
 import {
@@ -51,7 +52,7 @@ export const Default: Story = {
   parameters: {
     nextjs: {
       navigation: {
-        pathname: `/grants/${grantId}/grantees/${granteeId}/projects/summary`,
+        pathname: `/${ROUTE_SECTIONS.GRANT_IMPACT}/${grantId}/grantees/${granteeId}/projects/summary`,
         segments: [
           ['grantId', grantId],
           ['granteeId', granteeId],
@@ -79,7 +80,7 @@ export const ImpactMetrics: Story = {
   parameters: {
     nextjs: {
       navigation: {
-        pathname: `/grants/${grantId}/grantees/${granteeId}/projects/impact-metrics`,
+        pathname: `/${ROUTE_SECTIONS.GRANT_IMPACT}/${grantId}/grantees/${granteeId}/projects/impact-metrics`,
         segments: [
           ['grantId', grantId],
           ['granteeId', granteeId],
@@ -107,7 +108,7 @@ export const GithubMetrics: Story = {
   parameters: {
     nextjs: {
       navigation: {
-        pathname: `/grants/${grantId}/grantees/${granteeId}/projects/github-metrics`,
+        pathname: `/${ROUTE_SECTIONS.GRANT_IMPACT}/${grantId}/grantees/${granteeId}/projects/github-metrics`,
         segments: [
           ['grantId', grantId],
           ['granteeId', granteeId],
@@ -135,7 +136,7 @@ export const CodeMetrics: Story = {
   parameters: {
     nextjs: {
       navigation: {
-        pathname: `/grants/${grantId}/grantees/${granteeId}/projects/code-metrics`,
+        pathname: `/${ROUTE_SECTIONS.GRANT_IMPACT}/${grantId}/grantees/${granteeId}/projects/code-metrics`,
         segments: [
           ['grantId', grantId],
           ['granteeId', granteeId],
@@ -163,7 +164,7 @@ export const ContractAddress: Story = {
   parameters: {
     nextjs: {
       navigation: {
-        pathname: `/grants/${grantId}/grantees/${granteeId}/projects/contract-address`,
+        pathname: `/${ROUTE_SECTIONS.GRANT_IMPACT}/${grantId}/grantees/${granteeId}/projects/contract-address`,
         segments: [
           ['grantId', grantId],
           ['granteeId', granteeId],

src/home/components/footer.tsx

@@ -1,6 +1,8 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
+import { HREFS } from '@/shared/core/constants';
+
 import { FarcasterIcon } from '@/home/components/icons/farcaster';
 import { TelegramIcon } from '@/home/components/icons/telegram';
 import { TwitterIcon } from '@/home/components/icons/twitter';
@@ -37,16 +39,16 @@ export const Footer = () => {
         </div>
         <ul className="flex flex-col gap-y-1 pb-12">
           <li>
-            <Link href={'/projects'}>Projects</Link>
+            <Link href={HREFS.PROJECTS_PAGE}>Projects</Link>
           </li>
           <li>
-            <Link href={'/organizations'}>Organizations</Link>
+            <Link href={HREFS.ORGS_PAGE}>Organizations</Link>
           </li>
           <li>
-            <Link href={'/vc'}>VC</Link>
+            <Link href={HREFS.ACTIVE_GRANTS_PAGE}>Active Grants</Link>
           </li>
           <li>
-            <Link href={'/grants'}>Grants</Link>
+            <Link href={HREFS.GRANT_IMPACT_PAGE}>Grant Impact</Link>
           </li>
         </ul>
       </div>