wip

src/app/_store/models.ts

@@ -1,16 +1,19 @@
 import { Models } from "@rematch/core";
 
 import { auth } from "@/modules/auth/state";
+import { donationModel } from "@/modules/donation/models";
 import { navModel, profilesModel } from "@/modules/profile/models";
 
 export interface RootModel extends Models<RootModel> {
   auth: typeof auth;
+  donation: typeof donationModel;
   profiles: typeof profilesModel;
   nav: typeof navModel;
 }
 
 export const models: RootModel = {
   auth,
+  donation: donationModel,
   profiles: profilesModel,
   nav: navModel,
 };

src/common/api/potlock/hooks.ts

@@ -3,12 +3,19 @@ import { REQUEST_CONFIG } from "@/common/constants";
 import { swrHooks } from "./generated";
 import { ByAccountId, ByPotId } from "./types";
 
+export const useAccounts = () => swrHooks.useV1AccountsRetrieve(REQUEST_CONFIG);
+
 export const useAccount = ({ accountId }: ByAccountId) =>
   swrHooks.useV1AccountsRetrieve2(accountId, REQUEST_CONFIG);
 
-export const useAccounts = () => swrHooks.useV1AccountsRetrieve(REQUEST_CONFIG);
+export const useAccountActivePots = ({ accountId }: ByAccountId) =>
+  swrHooks.useV1AccountsActivePotsRetrieve(
+    accountId,
+    { status: "live" },
+    REQUEST_CONFIG,
+  );
+
+export const usePots = () => swrHooks.useV1PotsRetrieve(REQUEST_CONFIG);
 
 export const usePot = ({ potId }: ByPotId) =>
   swrHooks.useV1PotsRetrieve2(potId, REQUEST_CONFIG);
-
-export const usePots = () => swrHooks.useV1PotsRetrieve(REQUEST_CONFIG);

src/common/ui/components/radio-group.tsx

@@ -79,7 +79,13 @@ export const RadioGroupItem = forwardRef<
         <span un-font="500">{label}</span>
 
         {hint && (
-          <span un-font="500" un-text="neutral-500">
+          <span
+            un-font="500"
+            className={cn({
+              "text-neutral-400": disabled,
+              "text-neutral-500": !disabled,
+            })}
+          >
             {hint}
           </span>
         )}

src/modules/donation/components/modal.tsx → src/modules/donation/components/DonationModal.tsx

@@ -5,8 +5,8 @@ import { create, useModal } from "@ebay/nice-modal-react";
 import { AccountId, PotId } from "@/common/api/potlock";
 import { Dialog, DialogContent } from "@/common/ui/components";
 
-import { DonationToAccount } from "./to-account";
-import { DonationToPot } from "./to-pot";
+import { DonationToPot } from "./DonationToPot";
+import { DonationToProject } from "./DonationToProject";
 
 export type DonationModalProps = { accountId: AccountId } | { potId: PotId };
 
@@ -22,7 +22,7 @@ export const DonationModal = create((props: DonationModalProps) => {
     <Dialog open={self.visible}>
       <DialogContent onCloseClick={close}>
         {"accountId" in props && (
-          <DonationToAccount accountId={props.accountId} closeDialog={close} />
+          <DonationToProject accountId={props.accountId} closeDialog={close} />
         )}
 
         {"potId" in props && (

src/modules/donation/components/to-account.tsx → src/modules/donation/components/DonationToProject.tsx

@@ -1,5 +1,6 @@
-import { useCallback, useMemo, useState } from "react";
+import { useMemo } from "react";
 
+import { dispatch, useTypedSelector } from "@/app/_store";
 import { ByAccountId, potlock } from "@/common/api/potlock";
 import {
   Button,
@@ -19,48 +20,32 @@ import {
   TextField,
 } from "@/common/ui/components";
 
-import { useAccountDonationForm } from "../hooks/account-donation";
+import { useProjectDonationForm } from "../hooks/project-donation";
 
-export type DonationToAccountStep =
-  | "start"
-  | "allocation"
-  | "confirmation"
-  | "done";
-
-export type DonationToAccountProps = ByAccountId & {
+export type DonationToProjectProps = ByAccountId & {
   closeDialog: VoidFunction;
 };
 
-export const DonationToAccount: React.FC<DonationToAccountProps> = ({
+export const DonationToProject: React.FC<DonationToProjectProps> = ({
   accountId,
   closeDialog: _,
 }) => {
-  const { isLoading, data: account, error } = potlock.useAccount({ accountId });
-  const form = useAccountDonationForm({ accountId });
-
-  const [currentStepIndex, setCurrentStepIndex] =
-    useState<DonationToAccountStep>("start");
-
-  const handleNextStep = useCallback(
-    (step: DonationToAccountStep) => () => {
-      switch (step) {
-        case "start":
-          return setCurrentStepIndex("allocation");
-        case "allocation":
-          return setCurrentStepIndex("confirmation");
-        case "confirmation":
-          return setCurrentStepIndex("done");
-        case "done":
-          return void null;
-      }
-    },
-
-    [],
-  );
+  const { currentStep } = useTypedSelector(({ donation }) => donation);
+
+  const {
+    isLoading: isAccountLoading,
+    data: account,
+    error: accountError,
+  } = potlock.useAccount({ accountId });
+
+  const { data: activePots } = potlock.useAccountActivePots({ accountId });
+  const hasMatchingPots = (activePots?.length ?? 0) > 0;
+
+  const { onSubmit, ...form } = useProjectDonationForm({});
 
   const currentScreen = useMemo(() => {
-    switch (currentStepIndex) {
-      case "start":
+    switch (currentStep) {
+      case "allocation":
         return (
           <>
             <div un-flex="~ col" un-gap="3">
@@ -79,9 +64,9 @@ export const DonationToAccount: React.FC<DonationToAccountProps> = ({
                 <RadioGroupItem
                   id="donation-options-matched"
                   label="Quadratically matched donation"
-                  hint="(no pots available)"
+                  hint={hasMatchingPots ? undefined : "(no pots available)"}
                   value="matched"
-                  //disabled
+                  disabled={!hasMatchingPots}
                 />
               </RadioGroup>
             </div>
@@ -125,18 +110,16 @@ export const DonationToAccount: React.FC<DonationToAccountProps> = ({
             />
           </>
         );
-      case "allocation":
-        return <></>;
       case "confirmation":
         return <></>;
       case "done":
         return <></>;
       default:
         return "Error: Unable to proceed with the next step";
     }
-  }, [currentStepIndex]);
+  }, [currentStep, hasMatchingPots]);
 
-  return isLoading ? (
+  return isAccountLoading ? (
     <span
       un-flex="~"
       un-justify="center"
@@ -149,7 +132,7 @@ export const DonationToAccount: React.FC<DonationToAccountProps> = ({
     </span>
   ) : (
     <>
-      {error && error.message}
+      {accountError && accountError.message}
 
       {account !== undefined && (
         <>
@@ -164,20 +147,17 @@ export const DonationToAccount: React.FC<DonationToAccountProps> = ({
           </DialogDescription>
 
           <DialogFooter>
-            <Button
-              type="button"
-              variant="brand-outline"
-              color="black"
-              disabled
-            >
+            <Button variant="brand-outline" color="black" disabled>
               Add to cart
             </Button>
 
             <Button
-              type="button"
               variant="brand-filled"
-              color="primary"
-              onClick={handleNextStep(currentStepIndex)}
+              onClick={
+                currentStep === "confirmation"
+                  ? onSubmit
+                  : dispatch.donation.handleNextStep
+              }
             >
               Proceed to donate
             </Button>

src/modules/donation/hooks/project-donation.ts

@@ -0,0 +1,25 @@
+import { useCallback } from "react";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { infer as FromSchema } from "zod";
+
+import { donationSchema } from "@/common/api/potlock";
+
+export const projectDonationSchema = donationSchema;
+
+export type ProjectDonationInputs = FromSchema<typeof projectDonationSchema>;
+
+export type ProjectDonationFormParameters = {};
+
+export const useProjectDonationForm = (_: ProjectDonationFormParameters) => {
+  const { handleSubmit, ...form } = useForm<ProjectDonationInputs>({
+    resolver: zodResolver(donationSchema),
+  });
+
+  const onSubmit: SubmitHandler<ProjectDonationInputs> = useCallback((data) => {
+    console.log(data);
+  }, []);
+
+  return { onSubmit: handleSubmit(onSubmit), ...form };
+};

src/modules/donation/index.ts

@@ -1 +1 @@
-export { useDonationModal } from "./components/modal";
+export { useDonationModal } from "./components/DonationModal";

src/modules/donation/models.ts

@@ -0,0 +1,39 @@
+import { createModel } from "@rematch/core";
+
+import { RootModel } from "@/app/_store/models";
+
+export type DonationStep = "allocation" | "confirmation" | "done";
+
+export type DonationState = {
+  currentStep: DonationStep;
+};
+
+const setStep = (state: DonationState, step: DonationStep) => ({
+  ...state,
+  currentStep: step,
+});
+
+export const donationModel = createModel<RootModel>()({
+  state: {
+    currentStep: "allocation",
+  } as DonationState,
+
+  reducers: {
+    handleNextStep(state) {
+      switch (state.currentStep) {
+        case "allocation":
+          return setStep(state, "confirmation");
+
+        case "confirmation":
+          return setStep(state, "done");
+      }
+    },
+
+    handlePrevStep(state) {
+      switch (state.currentStep) {
+        case "confirmation":
+          return setStep(state, "allocation");
+      }
+    },
+  },
+});