Create CurrencySelectorField controller

src/components/donation/Steps/DonateMethods/Stripe/CurrencySelectorField.tsx

@@ -0,0 +1,31 @@
+import {
+ FieldValues,
+ Path,
+ useController,
+ useFormContext,
+} from "react-hook-form";
+import CurrencySelector, { Currency } from "components/CurrencySelector";
+
+type Props<T extends FieldValues> = {
+ classes?: { combobox?: string };
+ currencies: Currency[];
+ disabled?: boolean;
+ name: Path<T>;
+};
+
+export default function CurrencySelectorField<T extends FieldValues>(
+ props: Props<T>
+) {
+ const { control } = useFormContext<T>();
+ const { field, formState } = useController({ control, name: props.name });
+
+ return (
+ <CurrencySelector
+ value={field.value}
+ onChange={field.onChange}
+ classes={props.classes}
+ currencies={props.currencies}
+ disabled={!!props.disabled || formState.isSubmitting}
+ />
+ );
+}

src/components/donation/Steps/DonateMethods/Stripe/Form.tsx

@@ -1,22 +1,20 @@
 import { yupResolver } from "@hookform/resolvers/yup";
+import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { Link } from "react-router-dom";
 import { ObjectSchema, number, object } from "yup";
-import { Props } from "./types";
+import { FormValues, Props } from "./types";
 import { SchemaShape } from "schemas/types";
+import { Currency } from "components/CurrencySelector";
 import ExtLink from "components/ExtLink";
 import LoadText from "components/LoadText";
 import Split from "components/Split";
 import { CheckField, Field } from "components/form";
+import { requiredString } from "schemas/string";
 import { appRoutes } from "constants/routes";
 import { TERMS_OF_USE_DONOR } from "constants/urls";
 import AdvancedOptions from "../../../AdvancedOptions";
-
-type FormValues = {
- amount: number;
- pctLiquidSplit: number;
- userOptForKYC: boolean;
-};
+import CurrencySelectorField from "./CurrencySelectorField";
 
 type FormProps = Props & {
  defaultValues: Partial<FormValues>;
@@ -30,10 +28,12 @@ export default function Form({
  widgetConfig,
  onSubmit,
 }: FormProps) {
+ const [currencies, setCurrencies] = useState<Currency[]>([]);
  const methods = useForm<FormValues>({
  resolver: yupResolver(schema),
  defaultValues: {
  amount: defaultValues.amount,
+ currency: { code: "", name: "" },
  pctLiquidSplit: defaultValues.pctLiquidSplit ?? 50,
  userOptForKYC: recipient.isKYCRequired || defaultValues.userOptForKYC, // if KYC required, user opts in by default
  },
@@ -51,6 +51,10 @@ export default function Form({
  label="Donation amount (USD)"
  classes={{ label: "font-bold" }}
  />
+ <CurrencySelectorField<FormValues>
+ name="currency"
+ currencies={currencies}
+ />
  {!recipient.isKYCRequired && (
  // if KYC is required, the checkbox is redundant
  <CheckField<FormValues>
@@ -124,4 +128,7 @@ const schema = object<any, SchemaShape<FormValues>>({
  .required("required")
  .positive("must be greater than zero")
  .typeError("must be a number"),
+ currency: object<any, SchemaShape<Currency>>({
+ code: requiredString.length(3),
+ }),
 }) as ObjectSchema<FormValues>;

src/components/donation/Steps/DonateMethods/Stripe/types.ts

@@ -1,4 +1,5 @@
 import { DonaterConfigFromWidget } from "types/widget";
+import { Currency } from "components/CurrencySelector";
 import { FormStep } from "slices/donation";
 import { type AdvancedOptionsDisplay } from "../../../AdvancedOptions";
 
@@ -7,3 +8,10 @@ export type Props = {
  widgetConfig: DonaterConfigFromWidget | null;
  state: FormStep;
 };
+
+export type FormValues = {
+ amount: number;
+ currency: Currency;
+ pctLiquidSplit: number;
+ userOptForKYC: boolean;
+};