fix: navigate to slug based project url on buy page (#2507)

web-marketplace/src/components/templates/ProjectDetails/ProjectDetails.tsx

@@ -60,6 +60,7 @@ import { GettingStartedResourcesSection } from '../../molecules';
 import { ProjectTopSection } from '../../organisms';
 import useGeojson from './hooks/useGeojson';
 import { useGetProject } from './hooks/useGetProject';
+import { useNavigateToSlug } from './hooks/useNavigateToSlug';
 import useSeo from './hooks/useSeo';
 import { useSortedDocuments } from './hooks/useSortedDocuments';
 import { useStakeholders } from './hooks/useStakeholders';
@@ -151,19 +152,10 @@ function ProjectDetails(): JSX.Element {
  onChainCreditClassId,
  creditClassOnChain,
  cardSellOrders,
+ slug,
  } = useGetProject();
 
- const slug =
- offchainProjectByIdData?.data?.projectById?.slug ||
- projectByOnChainId?.data?.projectByOnChainId?.slug ||
- projectBySlug?.data.projectBySlug?.slug;
-
- useEffect(() => {
- if (!!slug) {
- const hash = location.hash || '';
- navigate(`/project/${slug}${hash}`, { replace: true });
- }
- }, [slug, navigate, location.hash]);
+ useNavigateToSlug(slug);
 
  const element = document.getElementById(location.hash.substring(1));
  useEffect(() => {

web-marketplace/src/components/templates/ProjectDetails/hooks/useGetProject.ts

@@ -127,6 +127,11 @@ export const useGetProject = () => {
  [sanityProject?.fiatSellOrders, sellOrders],
  );
 
+ const slug =
+ offchainProjectByIdData?.data?.projectById?.slug ||
+ projectByOnChainId?.data?.projectByOnChainId?.slug ||
+ projectBySlug?.data.projectBySlug?.slug;
+
  return {
  sanityProject,
  loadingSanityProject,
@@ -145,5 +150,6 @@ export const useGetProject = () => {
  loadingBuySellOrders,
  sellOrders,
  cardSellOrders,
+ slug,
  };
 };

web-marketplace/src/components/templates/ProjectDetails/hooks/useNavigateToSlug.ts

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+export const useNavigateToSlug = (slug?: string | null, path?: string) => {
+ const location = useLocation();
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (!!slug) {
+ const hash = location.hash || '';
+ navigate(`/project/${slug}${path || ''}${hash}`, { replace: true });
+ }
+ }, [slug, navigate, location.hash, path]);
+};

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

@@ -8,6 +8,7 @@ import WithLoader from 'components/atoms/WithLoader';
 import { CardSellOrder } from 'components/organisms/ChooseCreditsForm/ChooseCreditsForm.types';
 import { MultiStepTemplate } from 'components/templates/MultiStepTemplate';
 import { useGetProject } from 'components/templates/ProjectDetails/hooks/useGetProject';
+import { useNavigateToSlug } from 'components/templates/ProjectDetails/hooks/useNavigateToSlug';
 
 import { PAYMENT_OPTIONS } from './BuyCredits.constants';
 import { BuyCreditsForm } from './BuyCredits.Form';
@@ -36,8 +37,11 @@ export const BuyCredits = () => {
  loadingBuySellOrders,
  sellOrders,
  cardSellOrders,
+ slug,
  } = useGetProject();
 
+ useNavigateToSlug(slug, '/buy');
+
  const [paymentOption, setPaymentOption] = useState<PaymentOptionsType>(
  PAYMENT_OPTIONS.CRYPTO,
  );