Add transfer funds modal

opencollective · Nov 7, 2024 · c06c741 · c06c741
1 parent 7dcb36f
commit c06c741
Show file tree

Hide file tree

Showing 8 changed files with 533 additions and 119 deletions.
diff --git a/components/FormField.tsx b/components/FormField.tsx
@@ -0,0 +1,87 @@
+import React, { useContext } from 'react';
+import type { FormikProps } from 'formik';
+import { Field } from 'formik';
+import { pickBy } from 'lodash';
+import { useIntl } from 'react-intl';
+
+import { isOCError } from '../lib/errors';
+import { formatFormErrorMessage, RICH_ERROR_MESSAGES } from '../lib/form-utils';
+
+import { Input } from './ui/Input';
+import { Label } from './ui/Label';
+import { FormikZodContext, getInputAttributesFromZodSchema } from './FormikZod';
+
+export function FormField({
+  label,
+  showError = true,
+  name,
+  hint,
+  placeholder,
+  children,
+  error: customError,
+  ...props
+}: {
+  label?: string;
+  showError?: boolean;
+  name: string;
+  hint?: string;
+  placeholder?: string;
+  children?: (props: { form: FormikProps<any>; meta: any; field: any }) => JSX.Element;
+  required?: boolean;
+  min?: number;
+  max?: number;
+  inputType?: string;
+  disabled?: boolean;
+  htmlFor?: string;
+}) {
+  const intl = useIntl();
+  const htmlFor = props.htmlFor || `input-${name}`;
+  const { schema } = useContext(FormikZodContext);
+
+  return (
+    <Field name={name}>
+      {({ field, form, meta }) => {
+        const hasError = Boolean(meta.error && (meta.touched || form.submitCount)) || Boolean(customError);
+        const error = customError || meta.error;
+
+        const fieldAttributes = {
+          ...(schema ? getInputAttributesFromZodSchema(schema, name) : null),
+          ...pickBy(
+            {
+              ...field,
+              name: name || htmlFor,
+              id: htmlFor,
+              type: props.inputType,
+              disabled: props.disabled,
+              min: props.min,
+              max: props.max,
+              required: props.required,
+              error: hasError,
+              placeholder,
+            },
+            value => value !== undefined,
+          ),
+        };
+        console.log({ fieldAttributes });
+        if (
+          'required' in fieldAttributes &&
+          !fieldAttributes.required &&
+          meta.error &&
+          meta.error === intl.formatMessage(RICH_ERROR_MESSAGES.requiredValue)
+        ) {
+          fieldAttributes.required = true;
+        }
+        return (
+          <div className="flex w-full flex-col gap-1">
+            {label && <Label className="leading-normal">{label}</Label>}
+            {hint && <p className="text-sm text-muted-foreground">{hint}</p>}
+            {children ? children({ form, meta, field: fieldAttributes }) : <Input {...fieldAttributes} />}
+            {hasError && showError && (
+              <p className="text-xs text-red-600">{isOCError(error) ? formatFormErrorMessage(intl, error) : error}</p>
+            )}
+          </div>
+        );
+      }}
+    </Field>
+  );
+}
diff --git a/components/crowdfunding-redesign/edit/EditFundraiser.tsx b/components/crowdfunding-redesign/edit/EditFundraiser.tsx
@@ -8,6 +8,7 @@ import { i18nGraphqlException } from '../../../lib/errors';
 import { API_V2_CONTEXT } from '../../../lib/graphql/helpers';
 import { isValidUrl } from '../../../lib/utils';
 
+import { FormField } from '../../FormField';
 import { FormikZod } from '../../FormikZod';
 import StyledDropzone, { DROPZONE_ACCEPT_IMAGES } from '../../StyledDropzone';
 import Tabs from '../../Tabs';
@@ -19,13 +20,7 @@ import { toast } from '../../ui/useToast';
 import type { Fundraiser } from '../helpers';
 import { fundraiserSchema, getDefaultFundraiserValues } from '../helpers';
 
-import {
-  ColumnSection,
-  editCrowdfundingSettingsMutation,
-  FormField,
-  LongDescriptionForm,
-  MainDetailsForm,
-} from './common';
+import { ColumnSection, editCrowdfundingSettingsMutation, LongDescriptionForm, MainDetailsForm } from './common';
 
 const CoverImageForm = ({ schema, initialValues, onSubmit }) => {
   const tabs = React.useMemo(

diff --git a/components/crowdfunding-redesign/edit/EditProfile.tsx b/components/crowdfunding-redesign/edit/EditProfile.tsx
@@ -8,6 +8,7 @@ import { i18nGraphqlException } from '../../../lib/errors';
 import { API_V2_CONTEXT } from '../../../lib/graphql/helpers';
 import { isValidUrl } from '../../../lib/utils';
 
+import { FormField } from '../../FormField';
 import { FormikZod } from '../../FormikZod';
 import StyledDropzone, { DROPZONE_ACCEPT_IMAGES } from '../../StyledDropzone';
 import { Button } from '../../ui/Button';
@@ -17,13 +18,7 @@ import { toast } from '../../ui/useToast';
 import type { Fundraiser } from '../helpers';
 import { getDefaultProfileValues, profileSchema } from '../helpers';
 
-import {
-  ColumnSection,
-  editCrowdfundingSettingsMutation,
-  FormField,
-  LongDescriptionForm,
-  MainDetailsForm,
-} from './common';
+import { ColumnSection, editCrowdfundingSettingsMutation, LongDescriptionForm, MainDetailsForm } from './common';
 
 const CoverImageForm = ({ schema, initialValues, onSubmit }) => {
   return (

diff --git a/components/crowdfunding-redesign/edit/common.tsx b/components/crowdfunding-redesign/edit/common.tsx
@@ -1,95 +1,18 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { gql } from '@apollo/client';
 import clsx from 'clsx';
 import type { FormikProps } from 'formik';
-import { Field, Form } from 'formik';
-import { pickBy } from 'lodash';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { Form } from 'formik';
+import { FormattedMessage } from 'react-intl';
 import type { z } from 'zod';
 
-import { isOCError } from '../../../lib/errors';
-import { formatFormErrorMessage, RICH_ERROR_MESSAGES } from '../../../lib/form-utils';
-
-import { FormikZod, FormikZodContext, getInputAttributesFromZodSchema } from '../../FormikZod';
+import { FormField } from '../../FormField';
+import { FormikZod } from '../../FormikZod';
 import RichTextEditor from '../../RichTextEditor';
 import { Button } from '../../ui/Button';
-import { Input, InputGroup } from '../../ui/Input';
-import { Label } from '../../ui/Label';
+import { InputGroup } from '../../ui/Input';
 import { Popover, PopoverContent, PopoverTrigger } from '../../ui/Popover';
 
-export function FormField({
-  label,
-  showError = true,
-  name,
-  hint,
-  placeholder,
-  children,
-  ...props
-}: {
-  label?: string;
-  showError?: boolean;
-  name: string;
-  hint?: string;
-  placeholder?: string;
-  children?: (props: { form: FormikProps<any>; meta: any; field: any }) => JSX.Element;
-  required?: boolean;
-  min?: number;
-  max?: number;
-  inputType?: string;
-  disabled?: boolean;
-  htmlFor?: string;
-}) {
-  const intl = useIntl();
-  const htmlFor = props.htmlFor || `input-${name}`;
-  const { schema } = useContext(FormikZodContext);
-
-  return (
-    <Field name={name}>
-      {({ field, form, meta }) => {
-        const hasError = Boolean(meta.error && (meta.touched || form.submitCount));
-        const fieldAttributes = {
-          ...(schema ? getInputAttributesFromZodSchema(schema, name) : null),
-          ...pickBy(
-            {
-              ...field,
-              name: name || htmlFor,
-              id: htmlFor,
-              type: props.inputType,
-              disabled: props.disabled,
-              min: props.min,
-              max: props.max,
-              required: props.required,
-              error: hasError,
-              placeholder,
-            },
-            value => value !== undefined,
-          ),
-        };
-        if (
-          'required' in fieldAttributes &&
-          !fieldAttributes.required &&
-          meta.error &&
-          meta.error === intl.formatMessage(RICH_ERROR_MESSAGES.requiredValue)
-        ) {
-          fieldAttributes.required = true;
-        }
-        return (
-          <div className="flex w-full flex-col gap-1">
-            {label && <Label className="text-base leading-normal">{label}</Label>}
-            {hint && <p className="text-sm text-muted-foreground">{hint}</p>}
-            {children ? children({ form, meta, field: fieldAttributes }) : <Input {...fieldAttributes} />}
-            {hasError && showError && (
-              <p className="text-xs text-red-500">
-                {isOCError(meta.error) ? formatFormErrorMessage(intl, meta.error) : meta.error}
-              </p>
-            )}
-          </div>
-        );
-      }}
-    </Field>
-  );
-}
-
 export function ColumnSection({ title, description, children }) {
   return (
     <div className="grid grid-cols-12 gap-4">