Skip to content

Commit

Permalink
cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@gustavlrsn
gustavlrsn committed Dec 19, 2024
1 parent eff6424 commit dbe8a55
Show file tree
Hide file tree
Showing 5 changed files with 24 additions and 189 deletions.
20 changes: 14 additions & 6 deletions components/expenses/EditExpenseDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 =
Expand Down Expand Up @@ -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 (
Expand Down Expand Up @@ -259,7 +267,7 @@ const EditAttachments = ({ expense, onSubmit }) => {
},
startOptions: startOptions.current,
onSubmit: transformedOnSubmit,
pick: { expenseAttachedFiles: true },
pickSchemaFields: { expenseAttachedFiles: true },
});

return (
Expand Down Expand Up @@ -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 (
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion components/expenses/ExpenseSummary.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
Expand Down
1 change: 0 additions & 1 deletion components/expenses/ExpenseTypeTag.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
169 changes: 0 additions & 169 deletions components/submit-expense/form/TypeOfExpenseSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
21 changes: 9 additions & 12 deletions components/submit-expense/useExpenseForm.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 {
Expand All @@ -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({}) };

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -1629,7 +1626,7 @@ export function useExpenseForm(opts: {
expenseForm.values,
startOptions.current,
false,
opts.pick,
opts.pickSchemaFields,
),
);
if (!startOptions.current.expenseId) {
Expand All @@ -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;
Expand Down Expand Up @@ -1680,7 +1677,7 @@ export function useExpenseForm(opts: {
expenseForm.values,
startOptions.current,
true,
opts.pick,
opts.pickSchemaFields,
),
),
});
Expand Down

0 comments on commit dbe8a55

Please sign in to comment.