admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: ability to switch currency format (#12542)

Browse Source 
Fixes #11927

I have added 'format' in the zod schema of currency, and for using it, I
am separately passing 'format' to 'currencyDisplay.'
The feature is working correctly.

---------

Co-authored-by: prastoin <paul@twenty.com>
Co-authored-by: Paul Rastoin <45004772+prastoin@users.noreply.github.com>
This commit is contained in:
Mohit Agrawal
2025-06-24 13:58:50 +05:30
committed by GitHub
parent 6651abae18
commit d0126e22ee
13 changed files with 122 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx
View File

@ -13,22 +13,22 @@ import { SettingsPath } from '@/types/SettingsPath';
import { TextInput } from '@/ui/input/components/TextInput';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { t } from '@lingui/core/macro';
import { Section } from '@react-email/components';
import { useState } from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import { H2Title, IconSearch } from 'twenty-ui/display';
import { UndecoratedLink } from 'twenty-ui/navigation';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { SettingsDataModelFieldTypeFormValues } from '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
import { t } from '@lingui/core/macro';
import { H2Title, IconSearch } from 'twenty-ui/display';
import { UndecoratedLink } from 'twenty-ui/navigation';
type SettingsObjectNewFieldSelectorProps = {
className?: string;
excludedFieldTypes?: FieldType[];
fieldMetadataItem?: Pick<
FieldMetadataItem,
'defaultValue' | 'options' | 'type'
'defaultValue' | 'options' | 'type' | 'settings'
>;
objectNamePlural: string;

46
packages/twenty-front/src/modules/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencyForm.tsx
View File

@ -2,17 +2,20 @@ import { Controller, useFormContext } from 'react-hook-form';
import { z } from 'zod';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { FieldCurrencyFormat } from '@/object-record/record-field/types/FieldMetadata';
import { currencyFieldDefaultValueSchema } from '@/object-record/record-field/validation-schemas/currencyFieldDefaultValueSchema';
import { currencyFieldSettingsSchema } from '@/object-record/record-field/validation-schemas/currencyFieldSettingsSchema';
import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
import { CURRENCIES } from '@/settings/data-model/constants/Currencies';
import { useCurrencySettingsFormInitialValues } from '@/settings/data-model/fields/forms/currency/hooks/useCurrencySettingsFormInitialValues';
import { Select } from '@/ui/input/components/Select';
import { useLingui } from '@lingui/react/macro';
import { IconCurrencyDollar } from 'twenty-ui/display';
import { IconCheckbox, IconCurrencyDollar } from 'twenty-ui/display';
import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToString';
export const settingsDataModelFieldCurrencyFormSchema = z.object({
defaultValue: currencyFieldDefaultValueSchema,
settings: currencyFieldSettingsSchema,
});
export type SettingsDataModelFieldCurrencyFormValues = z.infer<
@ -21,7 +24,10 @@ export type SettingsDataModelFieldCurrencyFormValues = z.infer<
type SettingsDataModelFieldCurrencyFormProps = {
disabled?: boolean;
fieldMetadataItem: Pick<FieldMetadataItem, 'defaultValue'>;
fieldMetadataItem: Pick<
FieldMetadataItem,
'icon' | 'label' | 'type' | 'defaultValue' | 'settings'
>;
};
export const SettingsDataModelFieldCurrencyForm = ({
@ -29,12 +35,16 @@ export const SettingsDataModelFieldCurrencyForm = ({
fieldMetadataItem,
}: SettingsDataModelFieldCurrencyFormProps) => {
const { t } = useLingui();
const {
initialAmountMicrosValue,
initialCurrencyCodeValue,
initialSettingsValue,
} = useCurrencySettingsFormInitialValues({
fieldMetadataItem,
});
const { control } =
useFormContext<SettingsDataModelFieldCurrencyFormValues>();
const { initialAmountMicrosValue, initialCurrencyCodeValue } =
useCurrencySettingsFormInitialValues({ fieldMetadataItem });
return (
<>
<Controller
@ -69,6 +79,32 @@ export const SettingsDataModelFieldCurrencyForm = ({
</SettingsOptionCardContentSelect>
)}
/>
<Controller
name="settings.format"
control={control}
defaultValue={initialSettingsValue.format}
render={({ field: { onChange, value } }) => (
<SettingsOptionCardContentSelect
Icon={IconCheckbox}
title={t`Format`}
description={t`Choose between Short and Full`}
>
<Select<FieldCurrencyFormat>
dropdownWidth={140}
value={value}
onChange={onChange}
disabled={disabled}
dropdownId="object-field-format-select"
options={[
{ label: 'Short', value: 'short' },
{ label: 'Full', value: 'full' },
]}
selectSizeVariant="small"
withSearchInput={false}
/>
</SettingsOptionCardContentSelect>
)}
/>
</>
);
};

12
packages/twenty-front/src/modules/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencySettingsFormCard.tsx
View File

@ -1,5 +1,5 @@
import { useFormContext } from 'react-hook-form';
import styled from '@emotion/styled';
import { useFormContext } from 'react-hook-form';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { SettingsDataModelPreviewFormCard } from '@/settings/data-model/components/SettingsDataModelPreviewFormCard';
@ -17,7 +17,7 @@ type SettingsDataModelFieldCurrencySettingsFormCardProps = {
disabled?: boolean;
fieldMetadataItem: Pick<
FieldMetadataItem,
'icon' | 'label' | 'type' | 'defaultValue'
'icon' | 'label' | 'type' | 'defaultValue' | 'settings'
>;
} & Pick<SettingsDataModelFieldPreviewCardProps, 'objectMetadataItem'>;
@ -31,9 +31,10 @@ export const SettingsDataModelFieldCurrencySettingsFormCard = ({
fieldMetadataItem,
objectMetadataItem,
}: SettingsDataModelFieldCurrencySettingsFormCardProps) => {
const { initialDefaultValue } = useCurrencySettingsFormInitialValues({
fieldMetadataItem,
});
const { initialDefaultValue, initialSettingsValue } =
useCurrencySettingsFormInitialValues({
fieldMetadataItem,
});
const { watch: watchFormValue } =
useFormContext<SettingsDataModelFieldCurrencyFormValues>();
@ -45,6 +46,7 @@ export const SettingsDataModelFieldCurrencySettingsFormCard = ({
fieldMetadataItem={{
...fieldMetadataItem,
defaultValue: watchFormValue('defaultValue', initialDefaultValue),
settings: watchFormValue('settings', initialSettingsValue),
}}
objectMetadataItem={objectMetadataItem}
/>

29
packages/twenty-front/src/modules/settings/data-model/fields/forms/currency/hooks/useCurrencySettingsFormInitialValues.ts
View File

@ -5,31 +5,42 @@ import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
import { SettingsDataModelFieldCurrencyFormValues } from '@/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencyForm';
import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToString';
type UseCurrencySettingsFormInitialValuesArgs = {
fieldMetadataItem?: Pick<FieldMetadataItem, 'defaultValue' | 'settings'>;
};
export const useCurrencySettingsFormInitialValues = ({
fieldMetadataItem,
}: {
fieldMetadataItem?: Pick<FieldMetadataItem, 'defaultValue'>;
}) => {
}: UseCurrencySettingsFormInitialValuesArgs) => {
const initialAmountMicrosValue =
(fieldMetadataItem?.defaultValue?.amountMicros as number | null) ?? null;
const initialCurrencyCodeValue =
fieldMetadataItem?.defaultValue?.currencyCode ??
applySimpleQuotesToString(CurrencyCode.USD);
const initialDefaultValue = {
amountMicros: initialAmountMicrosValue,
currencyCode: initialCurrencyCodeValue,
const initialFormValues: SettingsDataModelFieldCurrencyFormValues = {
settings: {
format: fieldMetadataItem?.settings?.format ?? 'short',
},
defaultValue: {
amountMicros: initialAmountMicrosValue,
currencyCode: initialCurrencyCodeValue,
},
};
const { resetField } =
useFormContext<SettingsDataModelFieldCurrencyFormValues>();
const resetDefaultValueField = () =>
resetField('defaultValue', { defaultValue: initialDefaultValue });
const resetDefaultValueField = () => {
resetField('defaultValue', {
defaultValue: initialFormValues.defaultValue,
});
resetField('settings', { defaultValue: initialFormValues.settings });
};
return {
initialAmountMicrosValue,
initialCurrencyCodeValue,
initialDefaultValue,
initialSettingsValue: initialFormValues.settings,
initialDefaultValue: initialFormValues.defaultValue,
resetDefaultValueField,
};
};

2
packages/twenty-front/src/modules/settings/data-model/fields/preview/utils/getCurrencyFieldPreviewValue.ts
View File

@ -11,7 +11,7 @@ export const getCurrencyFieldPreviewValue = ({
}: {
fieldMetadataItem: Pick<
FieldMetadataItem,
'defaultValue' | 'options' | 'type'
'defaultValue' | 'options' | 'type' | 'settings'
>;
}): FieldCurrencyValue | null => {
if (fieldMetadataItem.type !== FieldMetadataType.CURRENCY) return null;