import { useParams } from 'common' import Head from 'next/head' import { PropsWithChildren, useMemo, useState } from 'react' import { Admonition } from 'ui-patterns/admonition' import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { ProjectClaimBenefits } from '@/components/interfaces/Organization/ProjectClaim/benefits' import { ProjectClaimChooseOrg } from '@/components/interfaces/Organization/ProjectClaim/choose-org' import { ProjectClaimConfirm } from '@/components/interfaces/Organization/ProjectClaim/confirm' import { ProjectClaimLayout } from '@/components/interfaces/Organization/ProjectClaim/layout' import { useApiAuthorizationQuery } from '@/data/api-authorization/api-authorization-query' import { useOrganizationProjectClaimQuery } from '@/data/organizations/organization-project-claim-query' import { useOrganizationsQuery } from '@/data/organizations/organizations-query' import { useCustomContent } from '@/hooks/custom-content/useCustomContent' import { withAuth } from '@/hooks/misc/withAuth' import type { NextPageWithLayout } from '@/types' const ClaimProjectPageLayout = ({ children }: PropsWithChildren) => { const { appTitle } = useCustomContent(['app:title']) return ( <> {`Claim project | ${appTitle ?? 'Briven'}`} {children} ) } const ClaimProjectPage: NextPageWithLayout = () => { const { auth_id, token: claimToken } = useParams() const [selectedOrgSlug, setSelectedOrgSlug] = useState() const [step, setStep] = useState<'choose-org' | 'benefits' | 'confirm'>('choose-org') const { data: requester, isPending: isLoadingRequester, isError: isErrorRequester, error: errorRequester, } = useApiAuthorizationQuery({ id: auth_id }) const { data: organizations } = useOrganizationsQuery() const selectedOrganization = useMemo(() => { return (organizations || []).find((org) => org.slug === selectedOrgSlug) }, [selectedOrgSlug, organizations]) const { data: projectClaim, error: errorProjectClaim, isError: isErrorProjectClaim, isPending: isLoadingProjectClaim, isSuccess: isSuccessProjectClaim, } = useOrganizationProjectClaimQuery( { slug: selectedOrgSlug!, token: claimToken!, }, { enabled: !!claimToken && !!selectedOrgSlug, } ) if ((selectedOrgSlug && claimToken && isLoadingProjectClaim) || isLoadingRequester) { return (
) } if ((selectedOrgSlug && claimToken && isErrorProjectClaim) || isErrorRequester) { return (

Please retry your claim request from the requesting app

{!!errorProjectClaim &&

Error: {errorProjectClaim?.message}

} {!!errorRequester &&

Error: {errorRequester?.message}

} ) } if (step === 'choose-org' || !selectedOrganization) { return ( { setSelectedOrgSlug(orgSlug) setStep('benefits') }} /> ) } if (isSuccessProjectClaim) { if (step === 'benefits') { return ( setStep('confirm')} /> ) } return ( ) } return null } ClaimProjectPage.getLayout = (page) => (
{page}
 ) export default withAuth(ClaimProjectPage)