From dbe8a55febc50168e8566a3c6011f7cbff99b058 Mon Sep 17 00:00:00 2001
From: Gustav Larsson <gustav.larsson@gmail.com>
Date: Thu, 19 Dec 2024 13:51:51 +0100
Subject: [PATCH] cleanup

---
 components/expenses/EditExpenseDialog.tsx     |  20 ++-
 components/expenses/ExpenseSummary.js         |   2 +-
 components/expenses/ExpenseTypeTag.tsx        |   1 -
 .../form/TypeOfExpenseSection.tsx             | 169 ------------------
 components/submit-expense/useExpenseForm.ts   |  21 +--
 5 files changed, 24 insertions(+), 189 deletions(-)

diff --git a/components/expenses/EditExpenseDialog.tsx b/components/expenses/EditExpenseDialog.tsx
index 8b3264dca53..38dc79ec051 100644
--- a/components/expenses/EditExpenseDialog.tsx
+++ b/components/expenses/EditExpenseDialog.tsx
@@ -9,8 +9,9 @@ import { z } from 'zod';
 
 import { i18nGraphqlException } from '../../lib/errors';
 import { API_V2_CONTEXT } from '../../lib/graphql/helpers';
-import type { Currency, CurrencyExchangeRateInput, Expense, ExpenseType } from '../../lib/graphql/types/v2/graphql';
+import type { Currency, CurrencyExchangeRateInput, Expense } from '../../lib/graphql/types/v2/graphql';
 import useLoggedInUser from '../../lib/hooks/useLoggedInUser';
+import { cn } from '../../lib/utils';
 
 import { FormField } from '../FormField';
 import { FormikZod } from '../FormikZod';
@@ -117,7 +118,7 @@ const EditPayee = ({ expense, onSubmit }) => {
     },
     startOptions: startOptions.current,
     onSubmit: transformedOnSubmit,
-    pick: { expenseItems: true, hasTax: true, tax: true, payoutMethodId: true, payeeSlug: true },
+    pickSchemaFields: { expenseItems: true, hasTax: true, tax: true, payoutMethodId: true, payeeSlug: true },
   });
 
   const hasChangedPayee =
@@ -208,7 +209,14 @@ const EditPayoutMethod = ({ expense, onSubmit }) => {
     },
     startOptions: startOptions.current,
     onSubmit: transformedOnSubmit,
-    pick: { expenseItems: true, hasTax: true, tax: true, payoutMethodId: true, payee: true, payeeLocation: true },
+    pickSchemaFields: {
+      expenseItems: true,
+      hasTax: true,
+      tax: true,
+      payoutMethodId: true,
+      payee: true,
+      payeeLocation: true,
+    },
   });
 
   return (
@@ -259,7 +267,7 @@ const EditAttachments = ({ expense, onSubmit }) => {
     },
     startOptions: startOptions.current,
     onSubmit: transformedOnSubmit,
-    pick: { expenseAttachedFiles: true },
+    pickSchemaFields: { expenseAttachedFiles: true },
   });
 
   return (
@@ -322,7 +330,7 @@ const EditExpenseItems = ({ expense, onSubmit }) => {
     },
     startOptions: startOptions.current,
     onSubmit: transformedOnSubmit,
-    pick: { expenseItems: true, hasTax: true, tax: true },
+    pickSchemaFields: { expenseItems: true, hasTax: true, tax: true },
   });
 
   return (
@@ -442,7 +450,7 @@ export default function EditExpenseDialog({
       <Tooltip>
         <TooltipTrigger asChild>
           <DialogTrigger asChild>
-            <Button size="icon-xs" variant="outline" className={triggerClassName}>
+            <Button size="icon-xs" variant="outline" className={cn('h-7 w-7', triggerClassName)}>
               <Pen size={16} />
             </Button>
           </DialogTrigger>
diff --git a/components/expenses/ExpenseSummary.js b/components/expenses/ExpenseSummary.js
index 2498279f0fe..cbb73632f3d 100644
--- a/components/expenses/ExpenseSummary.js
+++ b/components/expenses/ExpenseSummary.js
@@ -214,7 +214,7 @@ const ExpenseSummary = ({
         </Flex>
       </Flex>
       {expense?.type && (
-        <div className="mb-3 flex items-baseline gap-2">
+        <div className="mb-3 flex items-center gap-1">
           <ExpenseTypeTag type={expense.type} legacyId={expense.legacyId} isLoading={isLoading} />
 
           {useInlineExpenseEdit && (
diff --git a/components/expenses/ExpenseTypeTag.tsx b/components/expenses/ExpenseTypeTag.tsx
index b85d4daef9c..9bc65c0f2cf 100644
--- a/components/expenses/ExpenseTypeTag.tsx
+++ b/components/expenses/ExpenseTypeTag.tsx
@@ -22,7 +22,6 @@ const ExpenseTypeTag = ({ type, legacyId = undefined, isLoading = false, ...prop
     <StyledTag
       variant="rounded"
       type="grey"
-      mb="4px"
       mr="10px"
       textTransform="uppercase"
       fontSize="10px"
diff --git a/components/submit-expense/form/TypeOfExpenseSection.tsx b/components/submit-expense/form/TypeOfExpenseSection.tsx
index 3aa914350c5..609db754898 100644
--- a/components/submit-expense/form/TypeOfExpenseSection.tsx
+++ b/components/submit-expense/form/TypeOfExpenseSection.tsx
@@ -212,172 +212,3 @@ export function TypeOfExpenseSection(props: TypeOfExpenseSectionProps) {
     </FormSectionContainer>
   );
 }
-
-export function TypeOfExpenseForm(props: TypeOfExpenseSectionProps) {
-  const intl = useIntl();
-  const expenseTypeOption = props.form.values.expenseTypeOption;
-  const { toast } = useToast();
-
-  return (
-    <React.Fragment>
-      <RadioGroup
-        value={expenseTypeOption}
-        onValueChange={newValue => props.form.setFieldValue('expenseTypeOption', newValue as ExpenseType)}
-        className="flex"
-      >
-        <RadioGroupCard className="flex-grow basis-0" value={ExpenseType.INVOICE} disabled={props.form.initialLoading}>
-          <div>
-            <div className="mb-1 font-bold">
-              <FormattedMessage defaultMessage="Invoice" id="Expense.Type.Invoice" />
-            </div>
-            <div className="text-muted-foreground">
-              <FormattedMessage defaultMessage="I am submitting an invoice to get paid" id="plK07+" />
-            </div>
-          </div>
-        </RadioGroupCard>
-
-        <RadioGroupCard className="flex-grow basis-0" value={ExpenseType.RECEIPT} disabled={props.form.initialLoading}>
-          <div>
-            <div className="mb-1 font-bold">
-              <FormattedMessage defaultMessage="Reimbursement" id="ExpenseForm.ReceiptLabel" />
-            </div>
-            <div className="text-muted-foreground">
-              <FormattedMessage defaultMessage="I want a reimbursement for something I've paid for" id="ZQSnky" />
-            </div>
-          </div>
-        </RadioGroupCard>
-      </RadioGroup>
-
-      {!props.form.initialLoading && expenseTypeOption === ExpenseType.INVOICE && (
-        <div>
-          {props.form.options.host?.slug !== props.form.options.account?.slug &&
-            props.form.options.host?.policies?.EXPENSE_POLICIES?.invoicePolicy && (
-              <div className="mt-4">
-                <ExpensePolicyContainer
-                  title={<FormattedMessage defaultMessage="Host instructions to submit an invoice" id="jXsDtM" />}
-                  policy={props.form.options.host?.policies?.EXPENSE_POLICIES?.invoicePolicy}
-                  checked={props.form.values.acknowledgedHostInvoiceExpensePolicy}
-                  onAcknowledgedChanged={v => props.form.setFieldValue('acknowledgedHostInvoiceExpensePolicy', v)}
-                />
-              </div>
-            )}
-
-          {props.form.options.account?.policies?.EXPENSE_POLICIES?.invoicePolicy && (
-            <div className="mt-4">
-              <ExpensePolicyContainer
-                title={<FormattedMessage defaultMessage="Collective instructions to submit an invoice" id="NeQw7m" />}
-                policy={props.form.options.account?.policies?.EXPENSE_POLICIES?.invoicePolicy}
-                checked={props.form.values.acknowledgedCollectiveInvoiceExpensePolicy}
-                onAcknowledgedChanged={v => props.form.setFieldValue('acknowledgedCollectiveInvoiceExpensePolicy', v)}
-              />
-            </div>
-          )}
-        </div>
-      )}
-
-      {!props.form.initialLoading && expenseTypeOption === ExpenseType.RECEIPT && (
-        <div>
-          {props.form.options.host?.slug !== props.form.options.account?.slug &&
-            props.form.options.host?.policies?.EXPENSE_POLICIES?.receiptPolicy && (
-              <div className="mt-4">
-                <ExpensePolicyContainer
-                  title={<FormattedMessage defaultMessage="Host instructions to submit a receipt" id="YQgEUZ" />}
-                  policy={props.form.options.host?.policies?.EXPENSE_POLICIES?.receiptPolicy}
-                  checked={props.form.values.acknowledgedHostReceiptExpensePolicy}
-                  onAcknowledgedChanged={v => props.form.setFieldValue('acknowledgedHostReceiptExpensePolicy', v)}
-                />
-              </div>
-            )}
-
-          {props.form.options.account?.policies?.EXPENSE_POLICIES?.receiptPolicy && (
-            <div className="mt-4">
-              <ExpensePolicyContainer
-                title={<FormattedMessage defaultMessage="Collective instructions to submit a receipt" id="cP95i8" />}
-                policy={props.form.options.host?.policies?.EXPENSE_POLICIES?.receiptPolicy}
-                checked={props.form.values.acknowledgedCollectiveReceiptExpensePolicy}
-                onAcknowledgedChanged={v => props.form.setFieldValue('acknowledgedCollectiveReceiptExpensePolicy', v)}
-              />
-            </div>
-          )}
-        </div>
-      )}
-
-      {!props.form.initialLoading && expenseTypeOption === ExpenseType.INVOICE && (
-        <div className="mt-4 rounded-md border border-gray-300 p-4">
-          <Label>
-            <FormattedMessage defaultMessage="An invoice is required. Do you have one?" id="O+LW+y" />
-          </Label>
-          <Tabs
-            value={props.form.values.hasInvoiceOption}
-            onValueChange={newValue => props.form.setFieldValue('hasInvoiceOption', newValue as YesNoOption)}
-          >
-            <TabsList>
-              <TabsTrigger value={YesNoOption.YES}>
-                <FormattedMessage defaultMessage="Yes, I have an invoice" id="woKQYE" />
-              </TabsTrigger>
-              <TabsTrigger value={YesNoOption.NO}>
-                <FormattedMessage defaultMessage="No, generate an invoice for me" id="67idHB" />
-              </TabsTrigger>
-            </TabsList>
-            <TabsContent value={YesNoOption.YES}>
-              <div className="flex items-start gap-4">
-                <div className="h-16 flex-grow basis-0">
-                  <div>
-                    <StyledInputFormikField
-                      isFastField
-                      name="invoiceFile"
-                      isPrivate
-                      label={intl.formatMessage({ defaultMessage: 'Attach your invoice file', id: 'Oa/lhY' })}
-                    >
-                      {() => (
-                        <StyledDropzone
-                          {...attachmentDropzoneParams}
-                          kind="EXPENSE_ATTACHED_FILE"
-                          name="invoice"
-                          width={1}
-                          minHeight={48}
-                          height={1}
-                          showActions
-                          useGraphQL={true}
-                          parseDocument={false}
-                          isMulti={false}
-                          value={
-                            typeof props.form.values.invoiceFile === 'string'
-                              ? props.form.values.invoiceFile
-                              : props.form.values.invoiceFile?.url
-                          }
-                          onGraphQLSuccess={uploadResults => {
-                            props.form.setFieldValue('invoiceFile', uploadResults[0].file);
-                          }}
-                          onSuccess={files => {
-                            props.form.setFieldValue('invoiceFile', files ? files[0] : null);
-                          }}
-                          onReject={msg => {
-                            toast({ variant: 'error', message: msg });
-                          }}
-                        />
-                      )}
-                    </StyledInputFormikField>
-                  </div>
-                </div>
-                <div className="flex-grow basis-0">
-                  <StyledInputFormikField
-                    isFastField
-                    name="invoiceNumber"
-                    isPrivate
-                    label={intl.formatMessage({ defaultMessage: 'Invoice number', id: 'ijDMrP' })}
-                    placeholder="e.g. INV 001"
-                    hint={intl.formatMessage({
-                      defaultMessage: 'The unique identifier mentioned on your invoice',
-                      id: 'lct/39',
-                    })}
-                  />
-                </div>
-              </div>
-            </TabsContent>
-          </Tabs>
-        </div>
-      )}
-    </React.Fragment>
-  );
-}
diff --git a/components/submit-expense/useExpenseForm.ts b/components/submit-expense/useExpenseForm.ts
index 089d5513221..891e65eb447 100644
--- a/components/submit-expense/useExpenseForm.ts
+++ b/components/submit-expense/useExpenseForm.ts
@@ -567,11 +567,11 @@ type RecursivePartial<T> = {
       : T[P];
 };
 
-export function buildFormSchema(
+function buildFormSchema(
   values: ExpenseFormValues,
   options: Omit<ExpenseFormOptions, 'schema'>,
   intl: IntlShape,
-  pick?: any,
+  pickSchemaFields?: Record<string, boolean>,
 ): z.ZodType<RecursivePartial<ExpenseFormValues>, z.ZodObjectDef, RecursivePartial<ExpenseFormValues>> {
   const schema = z.object({
     accountSlug: z
@@ -1143,7 +1143,7 @@ export function buildFormSchema(
     }),
   });
 
-  return pick ? schema.pick(pick) : schema;
+  return pickSchemaFields ? schema.pick(pickSchemaFields as { [K in keyof z.infer<typeof schema>]?: true }) : schema;
 }
 
 function getPayeeSlug(values: ExpenseFormValues): string {
@@ -1167,7 +1167,7 @@ async function buildFormOptions(
   values: ExpenseFormValues,
   startOptions: ExpenseFormStartOptions,
   refresh?: boolean,
-  pick?: any,
+  pickSchemaFields?: Record<string, boolean>,
 ): Promise<ExpenseFormOptions> {
   const options: ExpenseFormOptions = { schema: z.object({}) };
 
@@ -1307,11 +1307,8 @@ async function buildFormOptions(
       options.totalInvoicedInExpenseCurrency = totalInvoiced;
     }
 
-    options.schema = buildFormSchema(values, options, intl, pick);
+    options.schema = buildFormSchema(values, options, intl, pickSchemaFields);
 
-    // if (pick) {
-    //   options.schema = options.schema.pick(pick);
-    // }
     return options;
   } catch (err) {
     // eslint-disable-next-line no-console
@@ -1357,7 +1354,7 @@ export function useExpenseForm(opts: {
     options: ExpenseFormOptions,
     startOptions: ExpenseFormStartOptions,
   ) => void | Promise<any>;
-  pick?: any;
+  pickSchemaFields?: Record<string, boolean>;
 }): ExpenseForm {
   const intl = useIntl();
   const apolloClient = useApolloClient();
@@ -1629,7 +1626,7 @@ export function useExpenseForm(opts: {
           expenseForm.values,
           startOptions.current,
           false,
-          opts.pick,
+          opts.pickSchemaFields,
         ),
       );
       if (!startOptions.current.expenseId) {
@@ -1640,7 +1637,7 @@ export function useExpenseForm(opts: {
     }
 
     refreshFormOptions();
-  }, [apolloClient, LoggedInUser, expenseForm.values, intl, startOptions]);
+  }, [apolloClient, LoggedInUser, expenseForm.values, intl, startOptions, opts.pickSchemaFields]);
 
   // revalidate form
   const validateForm = expenseForm.validateForm;
@@ -1680,7 +1677,7 @@ export function useExpenseForm(opts: {
           expenseForm.values,
           startOptions.current,
           true,
-          opts.pick,
+          opts.pickSchemaFields,
         ),
       ),
   });