cleanup

opencollective · Dec 19, 2024 · 4d8cc7c · 4d8cc7c
1 parent 16d50cf
commit 4d8cc7c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 49 deletions.
diff --git a/components/expenses/EditExpenseDialog.tsx b/components/expenses/EditExpenseDialog.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { gql, useMutation } from '@apollo/client';
 import { DialogClose } from '@radix-ui/react-dialog';
-import type { FormikProps } from 'formik';
 import { Form, FormikProvider, useFormikContext } from 'formik';
 import { pick } from 'lodash';
 import { Pen } from 'lucide-react';
@@ -58,7 +57,7 @@ const EditPayee = ({ expense, onSubmit }) => {
     allowInvite: false,
   });
   const transformedOnSubmit = React.useCallback(
-    async (values, h, formOptions, startOptions) => {
+    async (values, h, formOptions) => {
       const editValues = {
         payee: {
           slug: formOptions.payee?.slug,
@@ -107,7 +106,6 @@ const EditPayee = ({ expense, onSubmit }) => {
           description: '',
         },
       ],
-      additionalAttachments: [],
       hasInvoiceOption: YesNoOption.YES,
       inviteeNewIndividual: {},
       inviteeNewOrganization: {
@@ -198,8 +196,6 @@ const EditPayoutMethod = ({ expense, onSubmit }) => {
           description: '',
         },
       ],
-      additionalAttachments: [],
-      hasInvoiceOption: YesNoOption.YES,
       inviteeNewIndividual: {},
       inviteeNewOrganization: {
         organization: {},
@@ -344,9 +340,12 @@ const EditExpenseTitle = ({ expense, onSubmit }) => {
   });
 
   return (
-    <EditExpenseFormikContainer schema={schema} initialValues={expense} onSubmit={onSubmit}>
-      <FormField name="description" label="Title" />
-    </EditExpenseFormikContainer>
+    <FormikZod schema={schema} initialValues={expense} onSubmit={values => onSubmit(schema.parse(values))}>
+      <Form className="space-y-4">
+        <FormField name="description" label="Title" />
+        <EditExpenseActionButtons />
+      </Form>
+    </FormikZod>
   );
 };
 
@@ -364,47 +363,18 @@ function EditExpenseActionButtons({
   return (
     <DialogFooter>
       <DialogClose asChild>
-        <Button variant="outline">Cancel</Button>
+        <Button variant="outline">
+          <FormattedMessage defaultMessage="Cancel" id="cancel" />
+        </Button>
       </DialogClose>
 
       <Button disabled={disabled || loading} type="submit" loading={formik.isSubmitting} onClick={handleSubmit}>
-        Save
+        <FormattedMessage defaultMessage="Save" id="save" />
       </Button>
     </DialogFooter>
   );
 }
 
-function EditExpenseFormikContainer({ schema, initialValues, onSubmit, children }) {
-  return (
-    <FormikZod schema={schema} initialValues={initialValues} onSubmit={values => onSubmit(schema.parse(values))}>
-      {(formik: FormikProps<z.infer<typeof schema>>) => (
-        <Form className="space-y-4">
-          {children}
-          <EditExpenseActionButtons />
-        </Form>
-      )}
-    </FormikZod>
-  );
-}
-
-// const buildEditExpenseSchema = (field, intl) => {
-//   const schema = buildFormSchema({}, {}, intl);
-//   let pick;
-//   switch (field) {
-//     case 'description':
-//       pick = { description: true };
-//       break;
-//     case 'expenseItems':
-//       pick = { currency: true };
-//       break;
-//     case 'payee':
-//       pick = { name: true };
-//       break;
-//     default:
-//       break;
-//   }
-//   return schema.pick(pick);
-// };
 export default function EditExpenseDialog({
   expense,
   field,
@@ -416,6 +386,11 @@ export default function EditExpenseDialog({
 }: {
   expense: Expense;
   field: 'title' | 'expenseItems' | 'payoutMethod' | 'payee' | 'type' | 'attachments';
+  title: string;
+  description?: string;
+  dialogContentClassName?: string;
+  triggerClassName?: string;
+  goToLegacyEdit?: () => void;
 }) {
   const [open, setOpen] = React.useState(false);
 
@@ -487,7 +462,7 @@ export default function EditExpenseDialog({
               setOpen(false);
             }}
           >
-            Go to edit
+            <FormattedMessage defaultMessage="Go to edit" id="expense.goToEdit" />
           </Button>
         ) : (
           <RenderFormFields expense={expense} field={field} onSubmit={onSubmit} />

diff --git a/components/expenses/ExpenseSummary.js b/components/expenses/ExpenseSummary.js
@@ -193,7 +193,7 @@ const ExpenseSummary = ({
             <EditExpenseDialog
               expense={expense}
               field="title"
-              title={intl.formatMessage({ defaultMessage: 'Edit expense title', id: 'jMI3+l' })}
+              title={intl.formatMessage({ defaultMessage: 'Edit expense title', id: 'expense.editTitle' })}
             />
           )}
         </div>
@@ -220,8 +220,11 @@ const ExpenseSummary = ({
           {useInlineExpenseEdit && (
             <EditExpenseDialog
               field="type"
-              title="Edit type"
-              description="To edit expense type, use the legacy edit expense flow."
+              title={intl.formatMessage({ defaultMessage: 'Edit expense type', id: 'expense.editType' })}
+              description={intl.formatMessage({
+                defaultMessage: 'To edit expense type, use the legacy edit expense flow.',
+                id: 'expense.editType.description',
+              })}
               expense={expense}
               goToLegacyEdit={onEdit}
             />
@@ -398,7 +401,7 @@ const ExpenseSummary = ({
             expense={expense}
             dialogContentClassName="sm:max-w-xl"
             field="expenseItems"
-            title={intl.formatMessage({ defaultMessage: 'Edit expense items', id: 'lzRZ91' })}
+            title={intl.formatMessage({ defaultMessage: 'Edit expense items', id: 'expense.editItems' })}
           />
         )}
       </Flex>
@@ -536,7 +539,12 @@ const ExpenseSummary = ({
             )}
             <StyledHr flex="1 1" borderColor="black.300" />
             {useInlineExpenseEdit && (
-              <EditExpenseDialog title="Edit attachments" field="attachments" expense={expense} onEdit={onEdit} />
+              <EditExpenseDialog
+                title={intl.formatMessage({ defaultMessage: 'Edit attachments', id: 'expense.editAttachments' })}
+                field="attachments"
+                expense={expense}
+                onEdit={onEdit}
+              />
             )}
           </Flex>
           <ExpenseAttachedFiles files={expense.attachedFiles} openFileViewer={openFileViewer} />

diff --git a/components/expenses/ExpenseSummaryAdditionalInformation.js b/components/expenses/ExpenseSummaryAdditionalInformation.js
@@ -211,7 +211,7 @@ const ExpenseSummaryAdditionalInformation = ({
             <EditExpenseDialog
               field={'payee'}
               expense={expense}
-              title={'Edit payee'}
+              title={intl.formatMessage({ defaultMessage: 'Edit payee', id: 'expense.editPayee' })}
               dialogContentClassName="sm:max-w-xl"
             />
           )}
@@ -279,7 +279,7 @@ const ExpenseSummaryAdditionalInformation = ({
             <EditExpenseDialog
               field={'payoutMethod'}
               expense={expense}
-              title={'Edit payout method'}
+              title={intl.formatMessage({ defaultMessage: 'Edit payout method', id: 'expense.editPayoutMethod' })}
               dialogContentClassName="sm:max-w-xl"
             />
           )}