feat: APP-365 use new buy credits flow on Project cards (#2503)

web-components/src/components/molecules/CreditClassGridCard/CreditClassGridCard.tsx

@@ -17,7 +17,7 @@ export interface Props {
  name: string;
  imgSrc: string;
  purchaseInfo?: PurchaseInfo;
- button: ButtonType;
+ button?: ButtonType;
  href?: string;
  className?: string;
  LinkComponent?: LinkComponentType;
@@ -36,8 +36,6 @@ export const CreditClassGridCard = ({
  LinkComponent = ({ children }) => <>{children}</>,
  sx = [],
 }: Props): JSX.Element => {
- const { text, disabled, startIcon, onClick } = button;
-
  return (
  <Card
  elevation={1}
@@ -66,15 +64,17 @@ export const CreditClassGridCard = ({
  sx={{ mb: 5 }}
  bodyTexts={bodyTexts}
  />
- <OutlinedButton
- onClick={onClick}
- size="small"
- startIcon={startIcon}
- disabled={disabled}
- sx={{ width: '100%' }}
- >
- {text}
- </OutlinedButton>
+ {button && (
+ <OutlinedButton
+ onClick={button.onClick}
+ size="small"
+ startIcon={button.startIcon}
+ disabled={button.disabled}
+ sx={{ width: '100%' }}
+ >
+ {button.text}
+ </OutlinedButton>
+ )}
  </Box>
  </Card>
  );

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

@@ -16,10 +16,10 @@ import {
  getProjectCardButtonMapping,
  getProjectCardPurchaseDetailsTitleMapping,
 } from 'lib/constants/shared.constants';
+import { NormalizeProject } from 'lib/normalizers/projects/normalizeProjectsWithMetadata';
 import { getSoldOutProjectsQuery } from 'lib/queries/react-query/sanity/getSoldOutProjectsQuery/getSoldOutProjectsQuery';
 import { useTracker } from 'lib/tracker/useTracker';
 
-import { ProjectWithOrderData } from 'pages/Projects/AllProjects/AllProjects.types';
 import { getCreditsTooltip } from 'pages/Projects/AllProjects/utils/getCreditsTooltip';
 import { getIsSoldOut } from 'pages/Projects/AllProjects/utils/getIsSoldOut';
 import WithLoader from 'components/atoms/WithLoader';
@@ -31,7 +31,7 @@ import { useSectionStyles } from './ProjectCardsSection.styles';
 import { ProjectCardOnButtonClickParams } from './ProjectCardsSection.types';
 
 interface Props {
- projects: ProjectWithOrderData[];
+ projects: NormalizeProject[];
  title?: string;
  body?: Maybe<Scalars['JSON']>;
  titleAlign?: 'center' | 'left';

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

@@ -1,5 +1,5 @@
-import { ProjectWithOrderData } from 'pages/Projects/AllProjects/AllProjects.types';
+import { NormalizeProject } from 'lib/normalizers/projects/normalizeProjectsWithMetadata';
 
 export type ProjectCardOnButtonClickParams = {
- project: ProjectWithOrderData;
+ project: NormalizeProject;
 };

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

@@ -31,10 +31,10 @@ import {
 import { SellOrdersActionsBarCreatePostButton } from './SellOrdersActionsBar.CreatePostButton';
 
 type Params = {
- isBuyButtonDisabled: boolean;
+ isBuyButtonDisabled?: boolean;
  isCommunityCredit: boolean;
  onBookCallButtonClick: () => void;
- onBuyButtonClick: () => void;
+ onBuyButtonClick?: () => void;
  onChainProjectId?: string | null;
  offChainProjectId?: string | null;
  projectName?: string;
@@ -173,7 +173,7 @@ export const SellOrdersActionsBar = ({
  {_(BOOK_CALL)}
  </OutlinedButton>
  )}
- {(!!onChainProjectId || !!onChainCreditClassId) && (
+ {onBuyButtonClick && !!onChainProjectId && !!onChainCreditClassId && (
  <InfoTooltip
  title={
  isSoldOut

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useParams } from 'react-router-dom';
 import { msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
@@ -7,9 +7,8 @@ import cx from 'classnames';
 
 import { useWallet } from 'lib/wallet/wallet';
 
-import { BuySellOrderFlow } from 'features/marketplace/BuySellOrderFlow/BuySellOrderFlow';
-import { ProjectWithOrderData } from 'pages/Projects/AllProjects/AllProjects.types';
 import { ProjectCardsSection } from 'components/organisms/ProjectCardsSection/ProjectCardsSection';
+import { useOnBuyButtonClick } from 'hooks/useOnBuyButtonClick';
 
 import useMoreProjects from './hooks/useMoreProjects';
 
@@ -20,10 +19,8 @@ export function MoreProjects(): JSX.Element {
  projectId as string,
  );
 
- const [selectedProject, setSelectedProject] =
- useState<ProjectWithOrderData | null>(null);
- const [isBuyFlowStarted, setIsBuyFlowStarted] = useState(false);
  const { isKeplrMobileWeb } = useWallet();
+ const onBuyButtonClick = useOnBuyButtonClick();
 
  return (
  <Box
@@ -35,15 +32,13 @@ export function MoreProjects(): JSX.Element {
  projects={projectsWithOrderData}
  loading={loading}
  onButtonClick={({ project }) => {
- setSelectedProject(project);
- setIsBuyFlowStarted(true);
+ onBuyButtonClick({
+ projectId: project?.id,
+ cardSellOrders: project?.cardSellOrders,
+ loading,
+ });
  }}
  />
- <BuySellOrderFlow
- isFlowStarted={isBuyFlowStarted}
- setIsFlowStarted={setIsBuyFlowStarted}
- projects={selectedProject && [selectedProject]}
- />
  </Box>
  );
 }

web-marketplace/src/components/templates/ProjectDetails/ProjectDetails.loader.ts

@@ -9,7 +9,6 @@ import { getSellOrdersExtendedQuery } from 'lib/queries/react-query/ecocredit/ma
 import { getProjectByOnChainIdQuery } from 'lib/queries/react-query/registry-server/graphql/getProjectByOnChainIdQuery/getProjectByOnChainIdQuery';
 import { getProjectBySlugQuery } from 'lib/queries/react-query/registry-server/graphql/getProjectBySlugQuery/getProjectBySlugQuery';
 import { getAllSanityCreditClassesQuery } from 'lib/queries/react-query/sanity/getAllCreditClassesQuery/getAllCreditClassesQuery';
-import { getAllSanityPrefinanceProjectsQuery } from 'lib/queries/react-query/sanity/getAllPrefinanceProjectsQuery/getAllPrefinanceProjectsQuery';
 import { getAllProjectPageQuery } from 'lib/queries/react-query/sanity/getAllProjectPageQuery/getAllProjectPageQuery';
 import { getFromCacheOrFetch } from 'lib/queries/react-query/utils/getFromCacheOrFetch';
 
@@ -33,10 +32,6 @@ export const projectDetailsLoader =
 
  // Queries
  const allProjectPageQuery = getAllProjectPageQuery({ sanityClient });
- const allSanityPrefinanceProjectsQuery =
- getAllSanityPrefinanceProjectsQuery({
- sanityClient,
- });
  const allCreditClassesQuery = getAllSanityCreditClassesQuery({
  sanityClient,
  });
@@ -89,10 +84,6 @@ export const projectDetailsLoader =
  query: allCreditClassesQuery,
  reactQueryClient: queryClient,
  });
- getFromCacheOrFetch({
- query: allSanityPrefinanceProjectsQuery,
- reactQueryClient: queryClient,
- });
  getFromCacheOrFetch({
  query: sellOrdersQuery,
  reactQueryClient: queryClient,

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

@@ -15,10 +15,6 @@ import InfoTooltip from 'web-components/src/components/tooltip/InfoTooltip';
 
 import { Project } from 'generated/graphql';
 import { Maybe } from 'graphql/jsutils/Maybe';
-import {
- connectWalletModalAtom,
- switchWalletModalAtom,
-} from 'lib/atoms/modals.atoms';
 import { useAuth } from 'lib/auth/auth';
 import { onBtnClick } from 'lib/button';
 import {
@@ -41,6 +37,7 @@ import { useWallet } from 'lib/wallet/wallet';
 
 import { CreateSellOrderFlow } from 'features/marketplace/CreateSellOrderFlow/CreateSellOrderFlow';
 import { useCreateSellOrderData } from 'features/marketplace/CreateSellOrderFlow/hooks/useCreateSellOrderData';
+import { buyFromProjectIdAtom } from 'pages/BuyCredits/BuyCredits.atoms';
 import { CREATE_POST_DISABLED_TOOLTIP_TEXT } from 'pages/Dashboard/MyProjects/MyProjects.constants';
 import { SOLD_OUT_TOOLTIP } from 'pages/Projects/AllProjects/AllProjects.constants';
 import { getPriceToDisplay } from 'pages/Projects/hooks/useProjectsSellOrders.utils';
@@ -52,6 +49,7 @@ import { ProjectStorySection } from 'components/organisms/ProjectStorySection/Pr
 import { SellOrdersActionsBar } from 'components/organisms/SellOrdersActionsBar/SellOrdersActionsBar';
 import { AVG_PRICE_TOOLTIP_PROJECT } from 'components/organisms/SellOrdersActionsBar/SellOrdersActionsBar.constants';
 import { useFetchPaginatedBatches } from 'hooks/batches/useFetchPaginatedBatches';
+import { useOnBuyButtonClick } from 'hooks/useOnBuyButtonClick';
 
 import { useLedger } from '../../../ledger';
 import { client as sanityClient } from '../../../lib/clients/sanity';
@@ -85,18 +83,9 @@ function ProjectDetails(): JSX.Element {
  const theme = useTheme();
  const { projectId } = useParams();
  const { ecocreditClient, dataClient } = useLedger();
- const setConnectWalletModal = useSetAtom(connectWalletModalAtom);
- const setSwitchWalletModalAtom = useSetAtom(switchWalletModalAtom);
- const {
- activeWalletAddr,
- isConnected,
- isKeplrMobileWeb,
- wallet,
- loginDisabled,
- } = useWallet();
+ const { isConnected, isKeplrMobileWeb, wallet, loginDisabled } = useWallet();
 
  const location = useLocation();
- const navigate = useNavigate();
  const { activeAccount } = useAuth();
  const [isCreatePostModalOpen, setIsCreatePostModalOpen] = useState(false);
  const [draftPost, setDraftPost] = useState<
@@ -124,23 +113,14 @@ function ProjectDetails(): JSX.Element {
  getAllSanityCreditClassesQuery({ sanityClient, enabled: !!sanityClient }),
  );
 
- const [isBuyFlowStarted, setIsBuyFlowStarted] = useState(false);
+ const setBuyFromProjectId = useSetAtom(buyFromProjectIdAtom);
  const [isSellFlowStarted, setIsSellFlowStarted] = useState(false);
 
- useEffect(() => {
- // As soon as user connects to the right wallet address,
- // we navigate to the buy page
- if (isBuyFlowStarted && isConnected) {
- navigate(`/project/${projectId}/buy`);
- }
- }, [isBuyFlowStarted, isConnected, navigate, projectId]);
-
  const {
  sanityProject,
  loadingSanityProject,
  projectBySlug,
  loadingProjectBySlug,
- projectByOnChainId,
  loadingProjectByOnChainId,
  offchainProjectByIdData,
  loadingOffchainProjectById,
@@ -156,6 +136,7 @@ function ProjectDetails(): JSX.Element {
  } = useGetProject();
 
  useNavigateToSlug(slug);
+ const onBuyButtonClick = useOnBuyButtonClick();
 
  const element = document.getElementById(location.hash.substring(1));
  useEffect(() => {
@@ -318,7 +299,8 @@ function ProjectDetails(): JSX.Element {
  isConnected,
  orders: projectsWithOrderData[0]?.sellOrders,
  hideOtcCard: isCommunityCredit || !onChainProjectId,
- setIsBuyFlowStarted,
+ setBuyFromProjectId,
+ projectId,
  });
 
  const projectPrefinancing = sanityProject?.projectPrefinancing;
@@ -384,30 +366,11 @@ function ProjectDetails(): JSX.Element {
  onBookCallButtonClick={onBookCallButtonClick}
  isAdmin={isAdmin}
  onBuyButtonClick={() => {
- if (
- // some credits are available for fiat purchase
- !loadingSanityProject &&
- !loadingBuySellOrders &&
- cardSellOrders.length > 0
- ) {
- // so we can always go to the buy page,
- // no matter if the user is logged in/connected to a wallet or not
- navigate(`/project/${projectId}/buy`);
- } else if (!loadingSanityProject && !loadingBuySellOrders) {
- if (!activeWalletAddr) {
- // no connected wallet address
- setIsBuyFlowStarted(true);
- setConnectWalletModal(atom => void (atom.open = true));
- } else {
- if (isConnected) {
- navigate(`/project/${projectId}/buy`);
- } else {
- // user logged in with web2 but not connected to the wallet address associated to his/er account
- setIsBuyFlowStarted(true);
- setSwitchWalletModalAtom(atom => void (atom.open = true));
- }
- }
- }
+ onBuyButtonClick({
+ projectId,
+ loading: loadingSanityProject || loadingBuySellOrders,
+ cardSellOrders,
+ });
  }}
  onChainProjectId={onChainProjectId}
  offChainProjectId={offChainProject?.id}

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

@@ -22,7 +22,6 @@ import {
  AllCreditClassQuery,
  AllProjectPageQuery,
  PrefinanceTimelineItem,
- Project as SanityProject,
 } from 'generated/sanity-graphql';
 import { UseStateSetter } from 'types/react/use-state';
 import { onBtnClick } from 'lib/button';
@@ -251,21 +250,23 @@ type FormatOtcCardDataParams = {
  isConnected: boolean;
  orders?: UISellOrderInfo[];
  hideOtcCard?: boolean;
- setIsBuyFlowStarted: UseStateSetter<boolean>;
+ setBuyFromProjectId: UseStateSetter<string>;
+ projectId?: string;
 };
 
 export const formatOtcCardData = ({
  data,
  isConnected,
  orders = [],
  hideOtcCard,
- setIsBuyFlowStarted,
+ setBuyFromProjectId,
+ projectId,
 }: FormatOtcCardDataParams): ActionCardProps | undefined => {
  const isNoteVisible = !isConnected || orders?.length > 0;
  const noteOnClick = (e: MouseEvent<HTMLButtonElement>) => {
- if (isConnected && orders?.length > 0) {
+ if (projectId && isConnected && orders?.length > 0) {
  e.preventDefault();
- setIsBuyFlowStarted(true);
+ setBuyFromProjectId(projectId);
  }
  };
 
@@ -294,22 +295,3 @@ export const formatTimelineDates = (item: PrefinanceTimelineItem) =>
  `${formatDate(item.date, 'MMM YYYY')}${
  item.endDate ? ` - ${formatDate(item.endDate, 'MMM YYYY')}` : ''
  }`;
-
-export const getCardSellOrders = (
- sanityFiatSellOrders: SanityProject['fiatSellOrders'],
- sellOrders: UISellOrderInfo[],
-) =>
- sanityFiatSellOrders
- ?.map(fiatOrder => {
- const sellOrder = sellOrders.find(
- cryptoOrder => cryptoOrder.id.toString() === fiatOrder?.sellOrderId,
- );
- if (sellOrder) {
- return {
- ...fiatOrder,
- ...sellOrder,
- };
- }
- return null;
- })
- .filter(Boolean) || [];