Merge pull request #29 from punktDeForks/Task/fix_phonenumber_link

TASK: fix the phonnumber link
sitegeist · Nov 22, 2023 · 9155562 · 9155562
2 parents abb7110 + 9c14e9a
commit 9155562
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 49 deletions.
diff --git a/Neos.Ui/core/src/application/LinkTypes/PhoneNumber/PhoneNumber.tsx b/Neos.Ui/core/src/application/LinkTypes/PhoneNumber/PhoneNumber.tsx
@@ -1,14 +1,16 @@
 import * as React from 'react';
+import {useState} from 'react';
+import {useForm} from 'react-final-form';
 
-import { SelectBox, TextInput } from '@neos-project/react-ui-components';
-import { useI18n } from "@sitegeist/archaeopteryx-neos-bridge";
-import { getCountries, getCountryCallingCode, parsePhoneNumber , AsYouType, CountryCode} from 'libphonenumber-js/max'
+import {SelectBox} from '@neos-project/react-ui-components';
+import {useI18n} from "@sitegeist/archaeopteryx-neos-bridge";
+import {getCountries, getCountryCallingCode, parsePhoneNumber, AsYouType, CountryCode} from 'libphonenumber-js/max'
 
-import { ILink, makeLinkType } from "../../../domain";
-import { Process, Field } from '../../../framework';
-import { IconCard, IconLabel } from "../../../presentation";
-import { Nullable } from 'ts-toolbelt/out/Union/Nullable';
-import { OptionalDeep } from 'ts-toolbelt/out/Object/Optional';
+import {ILink, makeLinkType} from "../../../domain";
+import {Process, Field, EditorEnvelope} from '../../../framework';
+import {IconCard, IconLabel} from "../../../presentation";
+import {Nullable} from 'ts-toolbelt/out/Union/Nullable';
+import {OptionalDeep} from 'ts-toolbelt/out/Object/Optional';
 
 type PhoneNumberLinkModel = {
     phoneNumber: string,
@@ -21,11 +23,12 @@ type PhoneNumberLinkOptions = {
 }
 
 export const PhoneNumber = makeLinkType<PhoneNumberLinkModel, PhoneNumberLinkOptions>('Sitegeist.Archaeopteryx:PhoneNumber', ({createError}) => ({
+
     isSuitableFor: (link: ILink) => link.href.startsWith('tel:'),
 
     useResolvedModel: (link: ILink) => {
         const phoneNumber = parsePhoneNumber(link.href.replace('tel:', ''));
-        if(phoneNumber) {
+        if (phoneNumber) {
             return Process.success({
                 phoneNumber: phoneNumber.number.replace(`+${phoneNumber.countryCallingCode}`, ''),
                 countryCallingCode: `+${phoneNumber.countryCallingCode.toString()}`,
@@ -37,7 +40,7 @@ export const PhoneNumber = makeLinkType<PhoneNumberLinkModel, PhoneNumberLinkOpt
         );
     },
 
-    convertModelToLink: (model: PhoneNumberLinkModel)  => {
+    convertModelToLink: (model: PhoneNumberLinkModel) => {
         return {href: `tel:${model.countryCallingCode}${model.phoneNumber}`};
     },
 
@@ -51,7 +54,7 @@ export const PhoneNumber = makeLinkType<PhoneNumberLinkModel, PhoneNumberLinkOpt
         );
     },
 
-    Preview: ({model}: {model: PhoneNumberLinkModel}) => {
+    Preview: ({model}: { model: PhoneNumberLinkModel }) => {
         return (
             <IconCard
                 icon="phone-alt"
@@ -60,13 +63,23 @@ export const PhoneNumber = makeLinkType<PhoneNumberLinkModel, PhoneNumberLinkOpt
         )
     },
 
-    Editor: ({model, options}: {model: Nullable<PhoneNumberLinkModel>, options: OptionalDeep<PhoneNumberLinkOptions>}) => {
+    Editor: ({
+                 model,
+                 options
+             }: { model: Nullable<PhoneNumberLinkModel>, options: OptionalDeep<PhoneNumberLinkOptions> }) => {
+        const defaultCountryCallingCode: string = model?.countryCallingCode || (options?.defaultCountry ? `+${getCountryCallingCode(options?.defaultCountry).toString()}` : `+${getCountryCallingCode(getCountries()[0]).toString()}`)
+
+        const [areaCode, setAreaCode] = useState<string>(defaultCountryCallingCode);
+
         const i18n = useI18n();
 
-        const countryCallingCodes = {} as {[key:string]: {value:string, label:string}};
+        const countryCallingCodes = {} as { [key: string]: { value: string, label: string } };
         options.favoredCountries?.map((country) => {
-            if(!countryCallingCodes[`+${getCountryCallingCode(country as CountryCode)}`]) {
-                countryCallingCodes[`+${getCountryCallingCode(country as CountryCode)}`] = {value: `+${getCountryCallingCode(country as CountryCode)}`, label: `${country} +${getCountryCallingCode(country as CountryCode)}`};
+            if (!countryCallingCodes[`+${getCountryCallingCode(country as CountryCode)}`]) {
+                countryCallingCodes[`+${getCountryCallingCode(country as CountryCode)}`] = {
+                    value: `+${getCountryCallingCode(country as CountryCode)}`,
+                    label: `${country} +${getCountryCallingCode(country as CountryCode)}`
+                };
             } else {
                 countryCallingCodes[`+${getCountryCallingCode(country as CountryCode)}`] = {
                     value: `+${getCountryCallingCode(country as CountryCode)}`,
@@ -80,8 +93,11 @@ export const PhoneNumber = makeLinkType<PhoneNumberLinkModel, PhoneNumberLinkOpt
                 return;
             }
 
-            if(!countryCallingCodes[`+${getCountryCallingCode(country)}`]) {
-                countryCallingCodes[`+${getCountryCallingCode(country)}`] = {value: `+${getCountryCallingCode(country)}`, label: `${country} +${getCountryCallingCode(country)}`};
+            if (!countryCallingCodes[`+${getCountryCallingCode(country)}`]) {
+                countryCallingCodes[`+${getCountryCallingCode(country)}`] = {
+                    value: `+${getCountryCallingCode(country)}`,
+                    label: `${country} +${getCountryCallingCode(country)}`
+                };
             } else {
                 countryCallingCodes[`+${getCountryCallingCode(country)}`] = {
                     value: `+${getCountryCallingCode(country)}`,
@@ -96,24 +112,35 @@ export const PhoneNumber = makeLinkType<PhoneNumberLinkModel, PhoneNumberLinkOpt
                 <label htmlFor="linkTypeProps.Sitegeist_Archaeopteryx:PhoneNumber.phoneNumber">
                     {i18n('Sitegeist.Archaeopteryx:LinkTypes.PhoneNumber:phoneNumber.label')}
                 </label>
-                <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', minWidth: '600px' }}>
+                <div style={{display: 'grid', gridTemplateColumns: '160px 1fr', minWidth: '600px'}}>
                     <Field<string>
                         name='countryCallingCode'
-                        initialValue={model?.countryCallingCode || (options?.defaultCountry ? `+${getCountryCallingCode(options?.defaultCountry).toString()}` : `+${getCountryCallingCode(getCountries()[0]).toString()}`)}
+                        format={value => {
+                            if (value !== undefined || value !== '') {
+                                setAreaCode(value)
+                            }
+                            if (value === '' || value === undefined) {
+                                useForm().change('linkTypeProps.Sitegeist_Archaeopteryx:PhoneNumber.countryCallingCode', areaCode);
+                            }
+                            return value;
+                        }}
+                        initialValue={areaCode || defaultCountryCallingCode}
                         validate={
-                            (value)=> {
+                            (value) => {
                                 if (!value) {
                                     return i18n('Sitegeist.Archaeopteryx:LinkTypes.PhoneNumber:countryCallingCode.validation.required');
                                 }
                             }
                         }
                     >{({input}) => (
-                        <SelectBox
-                            allowEmpty={false}
-                            options={Object.values(countryCallingCodes)}
-                            onValueChange={input.onChange}
-                            value={input.value}
-                        />
+                        <div style={{margin: '0.25rem 0 0 0'}}>
+                            <SelectBox
+                                allowEmpty={false}
+                                options={Object.values(countryCallingCodes)}
+                                onValueChange={(newValue: string) => {setAreaCode(newValue); input.onChange(newValue);}}
+                                value={input.value}
+                            />
+                        </div>
                     )}</Field>
                     <Field<string>
                         name="phoneNumber"
@@ -126,23 +153,17 @@ export const PhoneNumber = makeLinkType<PhoneNumberLinkModel, PhoneNumberLinkOpt
                                 return i18n('Sitegeist.Archaeopteryx:LinkTypes.PhoneNumber:phoneNumber.validation.numbersOnly');
                             }
                         }}
-                        >{({input}) => (
-                            <TextInput
-                                id={input.name}
-                                type="text"
-                                placeHolder={i18n('Sitegeist.Archaeopteryx:LinkTypes.PhoneNumber:phoneNumber.placeholder')}
-                                {...input}
-                                onChange={(event: any) => {
-                                        if(`${event}` === '') {
-                                            input.onChange(event);
-                                        }
-                                        if(checkRegex.test(`${event}`)) {
-                                            input.onChange(event);
-                                        }
-                                    }
-                                }
-                            />
-                     )}</Field>
+                    >{({input, meta}) => (
+                        <EditorEnvelope
+                            label={''}
+                            editor={'Neos.Neos/Inspector/Editors/TextFieldEditor'}
+                            editorOptions={{
+                                placeholder: i18n('Sitegeist.Archaeopteryx:LinkTypes.PhoneNumber:phoneNumber.placeholder')
+                            }}
+                            input={input}
+                            meta={meta}
+                        />
+                    )}</Field>
                 </div>
             </div>
         );

diff --git a/Resources/Private/Translations/de/LinkTypes/PhoneNumber.xlf b/Resources/Private/Translations/de/LinkTypes/PhoneNumber.xlf
@@ -23,8 +23,8 @@
                 <target>Bitte wählen Sie eine gültige Landesvorwahl</target>
             </trans-unit>
             <trans-unit id="phoneNumber.validation.numbersOnly" xml:space="preserve" approved="yes">
-                <source>Please enter only number values</source>
-                <target>Bitte nur Zahlenwerte eingeben</target>
+                <source>Please enter only number values without a leading 0</source>
+                <target>Bitte nur Zahlenwerte ohne führende 0 eingeben</target>
             </trans-unit>
         </body>
     </file>

diff --git a/Resources/Private/Translations/en/LinkTypes/PhoneNumber.xlf b/Resources/Private/Translations/en/LinkTypes/PhoneNumber.xlf
@@ -18,7 +18,7 @@
                 <source>Please select a valid country calling code</source>
             </trans-unit>
             <trans-unit id="phoneNumber.validation.numbersOnly" xml:space="preserve" approved="yes">
-                <source>Please enter only number values</source>
+                <source>Please enter only number values without a leading 0</source>
             </trans-unit>
         </body>
     </file>

diff --git a/Resources/Private/Translations/fr/LinkTypes/PhoneNumber.xlf b/Resources/Private/Translations/fr/LinkTypes/PhoneNumber.xlf
@@ -23,8 +23,8 @@
                 <target>Veuillez sélectionner un code d'appel de pays valide</target>
             </trans-unit>
             <trans-unit id="phoneNumber.validation.numbersOnly" xml:space="preserve" approved="yes">
-                <source>Please enter only number values</source>
-                <target>Veuillez saisir uniquement des valeurs numériques</target>
+                <source>Please enter only number values without a leading 0</source>
+                <target>Veuillez saisir uniquement les valeurs numériques sans le premier 0</target>
             </trans-unit>
         </body>
     </file>

diff --git a/Resources/Public/JavaScript/Plugin.js b/Resources/Public/JavaScript/Plugin.js