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

Remove duplicate plus sign for phone numbers (#8871)

Browse Source 
Fixes #8838 

1. Summary
It seems [this PR](https://github.com/twentyhq/twenty/pull/8614) caused
the issue. We added a plus sign on front-end when the
[callingCode](c735026f6c/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx (L70))
retrieved from back-end already has a plus sign.

2. Solution
@guillim Please let me know if I missed a case where the plus sign is
not there for the `callingCode`. If so, I think we should check whether
or not `callingCode` has a leading plus sign on front-end before adding
it. For now, I just removed the code that appends a plus sign on
front-end.

3. Screenshots

![localhost_3001_objects_people_view=f4aee583-9d0c-4961-a6e1-fd66bc51dfd5](https://github.com/user-attachments/assets/9fe8b361-47b9-4e3f-82b7-570713cf430c)

---------

Co-authored-by: guillim <guigloo@msn.com>
Co-authored-by: Guillim <guillim@users.noreply.github.com>
Co-authored-by: Weiko <deniaud.corentin@gmail.com>
This commit is contained in:
Khuddite
2024-12-05 16:41:14 -05:00
committed by GitHub
parent 4623b6127b
commit 50af41f170
5 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx
View File

@ -111,7 +111,7 @@ export const MultiItemFieldInput = <T,>({
break;
case FieldMetadataType.Phones:
item = items[index] as PhoneRecord;
setInputValue(`+${item.callingCode}` + item.number);
setInputValue(item.callingCode + item.number);
break;
case FieldMetadataType.Emails:
item = items[index] as string;

9
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx
View File

@ -14,6 +14,8 @@ import { PhoneCountryPickerDropdownButton } from '@/ui/input/components/internal
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { stripSimpleQuotesFromString } from '~/utils/string/stripSimpleQuotesFromString';
export const DEFAULT_PHONE_COUNTRY_CODE = '1';
const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
font-family: ${({ theme }) => theme.font.family};
height: 32px;
@ -71,11 +73,10 @@ export const PhonesFieldInput = ({ onCancel }: PhonesFieldInputProps) => {
const defaultCallingCode =
stripSimpleQuotesFromString(
fieldDefinition?.defaultValue?.primaryPhoneCountryCode,
) ?? '+1';
) ?? DEFAULT_PHONE_COUNTRY_CODE;
// TODO : improve once we store the real country code
const defaultCountry = useCountries().find(
(obj) => obj.callingCode === defaultCallingCode,
(obj) => `+${obj.callingCode}` === defaultCallingCode,
)?.countryCode;
const handlePersistPhones = (
@ -103,7 +104,7 @@ export const PhonesFieldInput = ({ onCancel }: PhonesFieldInputProps) => {
if (phone !== undefined) {
return {
number: phone.nationalNumber,
callingCode: `${phone.countryCallingCode}`,
callingCode: `+${phone.countryCallingCode}`,
};
}
return {

2
packages/twenty-front/src/modules/settings/data-model/fields/forms/phones/components/SettingsDataModelFieldPhonesForm.tsx
View File

@ -37,7 +37,7 @@ export const SettingsDataModelFieldPhonesForm = ({
.sort((a, b) => a.countryName.localeCompare(b.countryName))
.map((country) => ({
label: `${country.countryName} (+${country.callingCode})`,
value: `${country.callingCode}`,
value: `+${country.callingCode}`,
}));
countries.unshift({ label: 'No country', value: '' });
const defaultDefaultValue = {

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

@ -22,9 +22,9 @@ export const getPhonesFieldPreviewValue = ({
const primaryPhoneCountryCode =
fieldMetadataItem.defaultValue?.primaryPhoneCountryCode &&
fieldMetadataItem.defaultValue.primaryPhoneCountryCode !== ''
? `+${stripSimpleQuotesFromString(
? stripSimpleQuotesFromString(
fieldMetadataItem.defaultValue?.primaryPhoneCountryCode,
)}`
)
: null;
return {
...placeholderDefaultValue,

4
packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx
View File

@ -67,7 +67,7 @@ export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => {
<ExpandableList isChipCountDisplayed>
{phones.map(({ number, callingCode }, index) => {
const { parsedPhone, invalidPhone } =
parsePhoneNumberOrReturnInvalidValue(`+${callingCode}` + number);
parsePhoneNumberOrReturnInvalidValue(callingCode + number);
const URI = parsedPhone?.getURI();
return (
<RoundedLink
@ -84,7 +84,7 @@ export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => {
<StyledContainer>
{phones.map(({ number, callingCode }, index) => {
const { parsedPhone, invalidPhone } =
parsePhoneNumberOrReturnInvalidValue(`+${callingCode}` + number);
parsePhoneNumberOrReturnInvalidValue(callingCode + number);
const URI = parsedPhone?.getURI();
return (
<RoundedLink