diff --git a/src/locales/fr/transalationFr.json b/src/locales/fr/transalationFr.json index e357a0627..09d9a24a9 100644 --- a/src/locales/fr/transalationFr.json +++ b/src/locales/fr/transalationFr.json @@ -923,7 +923,7 @@ "color": "Couleur principale du thème", "colorDescreption": "Entrez le code hexadécimal de la couleur principale. Choisissez une couleur qui donne suffisamment de contraste pour que l'utilisateur puisse lire le contenu.", "colorPlaceHolder": "Collez votre code couleur ou sélectionnez une couleur", - "height": "Largeur", + "height": "Hauteur", "width": "Largeur maximale", "language": "Choix de langue", "eventType": "Type d'événement", @@ -995,11 +995,11 @@ "heading": "Nouvelle taxonomie", "class": "Classe", "classDropdownOptions": { - "event": "Event", - "place": "Place", - "person": "Person", - "organization": "Organization", - "virtualLocation": "Virtual location" + "event": "Événement", + "place": "Lieu", + "person": "Personne", + "organization": "Organisation", + "virtualLocation": "Emplacement virtuel" }, "classValidation": "Sélectionnez une classe", "classPlaceHolder": "Sélectionner une classe", diff --git a/src/pages/Dashboard/AddUser/AddUser.jsx b/src/pages/Dashboard/AddUser/AddUser.jsx index 0b8e0ea10..486601799 100644 --- a/src/pages/Dashboard/AddUser/AddUser.jsx +++ b/src/pages/Dashboard/AddUser/AddUser.jsx @@ -43,6 +43,7 @@ import { setReloadCalendar } from '../../../redux/reducer/selectedCalendarSlice' import CalendarAccordion from '../../../components/Accordion/CalendarAccordion'; import { removeObjectArrayDuplicates } from '../../../utils/removeObjectArrayDuplicates'; import Select from '../../../components/Select'; +import Cookies from 'js-cookie'; const AddUser = () => { const navigate = useNavigate(); @@ -356,10 +357,11 @@ const AddUser = () => { roles: response?.roles, isSuperAdmin: response?.isSuperAdmin ? true : false, userName: response?.userName, - interfaceLanguage: response?.languagePreference, + interfaceLanguage: response?.interfaceLanguage, }, }; dispatch(setUser(userDetails)); + Cookies.set('interfaceLanguage', response?.interfaceLanguage?.toLowerCase()); }); notification.success({ description: t('dashboard.userProfile.notification.profileUpdate'), @@ -448,10 +450,11 @@ const AddUser = () => { roles: response?.roles, isSuperAdmin: response?.isSuperAdmin ? true : false, userName: response?.userName, - interfaceLanguage: response?.languagePreference, + interfaceLanguage: response?.interfaceLanguage, }, }; dispatch(setUser(userDetails)); + Cookies.set('interfaceLanguage', response?.interfaceLanguage?.toLowerCase()); navigate(-2); }); diff --git a/src/pages/Dashboard/Settings/WidgetSettings/WidgetSettings.jsx b/src/pages/Dashboard/Settings/WidgetSettings/WidgetSettings.jsx index d53a0caf9..b421ee4df 100644 --- a/src/pages/Dashboard/Settings/WidgetSettings/WidgetSettings.jsx +++ b/src/pages/Dashboard/Settings/WidgetSettings/WidgetSettings.jsx @@ -27,6 +27,7 @@ import { SEARCH_DELAY } from '../../../../constants/search'; import { externalSourceOptions } from '../../../../constants/sourceOptions'; import CustomModal from '../../../../components/Modal/Common/CustomModal'; import { copyText } from '../../../../utils/copyText'; +import LoadingIndicator from '../../../../components/LoadingIndicator'; const { useBreakpoint } = Grid; const widgetUrl = process.env.REACT_APP_CALENDAR_WIDGET_BASE_URL; @@ -45,7 +46,8 @@ const WidgetSettings = () => { const calendarContentLanguage = currentCalendarData?.contentLanguage; const { eventDetailsUrlTemplate = '', listEventsUrlTemplate = '' } = currentCalendarData?.widgetSettings || {}; - const calendarName = currentCalendarData?.slug; + const calendarSlug = currentCalendarData?.slug; + const calendarName = currentCalendarData?.name[user?.interfaceLanguage?.toLowerCase()]; const encodedCalendarLogoUri = encodeURIComponent(currentCalendarData?.image?.uri || ''); const encodedEventDetailsUrlTemplate = encodeURIComponent(eventDetailsUrlTemplate); const encodedListEventsUrlTemplate = encodeURIComponent(listEventsUrlTemplate); @@ -159,7 +161,8 @@ const WidgetSettings = () => { urlCopy.searchParams.append('width', width); urlCopy.searchParams.append('limit', limit); - urlCopy.searchParams.append('calendar', calendarName); + urlCopy.searchParams.append('calendar', calendarSlug); + urlCopy.searchParams.append('calendarName', calendarName); urlCopy.searchParams.append('logo', encodedCalendarLogoUri); urlCopy.searchParams.append('eventUrl', encodedEventDetailsUrlTemplate); urlCopy.searchParams.append('searchEventsUrl', encodedListEventsUrlTemplate); @@ -172,7 +175,8 @@ const WidgetSettings = () => { urlCopy.searchParams.append('height', height); urlCopyMobile.searchParams.append('limit', limit); - urlCopyMobile.searchParams.append('calendar', calendarName); + urlCopyMobile.searchParams.append('calendar', calendarSlug); + urlCopyMobile.searchParams.append('calendarName', calendarName); urlCopyMobile.searchParams.append('logo', encodedCalendarLogoUri); urlCopyMobile.searchParams.append('eventUrl', encodedEventDetailsUrlTemplate); urlCopyMobile.searchParams.append('searchEventsUrl', encodedListEventsUrlTemplate); @@ -331,7 +335,8 @@ const WidgetSettings = () => { urlCopy.searchParams.append('locale', onLanguageSelect(locale)?.key.toLowerCase()); urlCopy.searchParams.append('limit', limit); urlCopy.searchParams.append('color', color); - urlCopy.searchParams.append('calendar', calendarName); + urlCopy.searchParams.append('calendar', calendarSlug); + urlCopy.searchParams.append('calendarName', calendarName); urlCopy.searchParams.append('height', height); setUrl(urlCopy); @@ -341,7 +346,8 @@ const WidgetSettings = () => { urlCopyMobile.searchParams.append('locale', onLanguageSelect(locale)?.key.toLowerCase()); urlCopyMobile.searchParams.append('limit', limit); urlCopyMobile.searchParams.append('color', color); - urlCopyMobile.searchParams.append('calendar', calendarName); + urlCopyMobile.searchParams.append('calendar', calendarSlug); + urlCopyMobile.searchParams.append('calendarName', calendarName); urlCopyMobile.searchParams.append('height', '600'); setUrlMObile(urlCopyMobile); @@ -361,474 +367,493 @@ const WidgetSettings = () => { } return ( - - - -

- {t(`${localePath}.title`)} -

- { - form - .validateFields(['width', 'height', 'limit', 'color']) - .then(() => { - setPreviewModal(true); - }) - .catch((error) => { - error?.errorFields?.map((e, index) => { - notify({ - index, - messageText: e.errors[0] != ' ' ? e.errors[0] : t(`${localePath}.validation.color`), + <> + {currentCalendarData ? ( + + + +

+ {t(`${localePath}.title`)} +

+ { + form + .validateFields(['width', 'height', 'limit', 'color']) + .then(() => { + setPreviewModal(true); + }) + .catch((error) => { + error?.errorFields?.map((e, index) => { + notify({ + index, + messageText: e.errors[0] != ' ' ? e.errors[0] : t(`${localePath}.validation.color`), + }); + }); }); - }); - }); - }} - /> - - - -
-

- {t(`${localePath}.pageDescription`)} -

-
- - - { - if (!value || !/^[1-9][0-9]*$/.test(value)) { - return Promise.reject(t(`${localePath}.validation.limit`)); - } - return Promise.resolve(); - }, - }, - ]} - data-cy="widget-settings-limit"> - - - - - { - if (!regexForHexCode.test(value)) { - return Promise.reject(); - } - return Promise.resolve(); - }, - }, - ]} - data-cy="widget-settings-color"> - { - setColor(color); - form.setFieldValue('color', color); - handleFormValuesChange({ color }, form.getFieldsValue(true)); - }} - /> - } - onChange={(color) => { - const value = color?.target?.value; - if (regexForHexCode.test(value)) { - setColor(color?.target?.value); - form.setFieldValue('color', color?.target?.value); - } - }} - placeholder={t(`${localePath}.colorPlaceHolder`)} - value={color} - /> - -

- {t(`${localePath}.colorDescreption`)} -

- - - - + }} + /> + + + +
+

+ {t(`${localePath}.pageDescription`)} +

+ + + { if (!value || !/^[1-9][0-9]*$/.test(value)) { - return Promise.reject(t(`${localePath}.validation.height`)); + return Promise.reject(t(`${localePath}.validation.limit`)); } return Promise.resolve(); }, }, ]} - validateTrigger={['onChange', 'onBlur']} - data-cy="widget-settings-height"> + data-cy="widget-settings-limit"> - - + { - if (value?.trim() === '') return Promise.resolve(); - if (!value || !/^[1-9][0-9]*$/.test(value)) { - return Promise.reject(t(`${localePath}.validation.width`)); + if (!regexForHexCode.test(value)) { + return Promise.reject(); } return Promise.resolve(); }, }, ]} - data-cy="widget-settings-width"> - + data-cy="widget-settings-color"> + { + setColor(color); + form.setFieldValue('color', color); + handleFormValuesChange({ color }, form.getFieldsValue(true)); + }} + /> + } + onChange={(color) => { + const value = color?.target?.value; + if (regexForHexCode.test(value)) { + setColor(color?.target?.value); + form.setFieldValue('color', color?.target?.value); + } + }} + placeholder={t(`${localePath}.colorPlaceHolder`)} + value={color} + /> +

+ {t(`${localePath}.colorDescreption`)} +

- - - - - - -

- {t(`${localePath}.filterHeading`)} -

-

- {t(`${localePath}.filterSectionDescription`)} -

- - - - - {t(`${localePath}.placeholder.eventType`)}} - allowClear - treeDefaultExpandAll - notFoundContent={} - clearIcon={} - treeData={treeTaxonomyOptions( - taxonomyDataEventType, - user, - 'EventType', - false, - calendarContentLanguage, - )} - tagRender={(props) => { - const { label, closable, onClose } = props; - return ( - } - data-cy={`tag-event-type-${label}`}> - {label} - - ); - }} - data-cy="widget-settings-treeselect-event-type" - /> - - - - - - {t(`${localePath}.placeholder`)}} - options={languageOptions} - /> - - - - - - } - placeholder={{t(`${localePath}.placeholder.region`)}} - clearIcon={} - treeData={treeTaxonomyOptions( - taxonomyDataRegion, - user, - placeTaxonomyMappedFieldTypes.REGION, - false, - calendarContentLanguage, - )} - tagRender={(props) => { - const { label, closable, onClose } = props; - return ( - }> - {label} - - ); - }} - /> - - - - - - { - setSearchKey(newValue); - }} - onBlur={() => { - debounceSearchPlace(''); - }} - allowClear - placeholder={{t(`${localePath}.placeholder.place`)}} - clearIcon={} - options={locationOptions} - notFoundContent={ - isEntitiesFetching ? ( -
- -
- ) : ( - - ) - } - tagRender={(props) => { - const { label, closable, onClose } = props; - return ( - } - data-cy={`widget-settings-tag-select-${label}`}> - {label} - - ); - }} - data-cy="widget-settings-location-select" - /> - - - - - {t(`${localePath}.placeholder.OrganizationsAndPeople`)}} - clearIcon={} - notFoundContent={ - isEntitiesFetching ? ( -
- -
- ) : ( - - ) - } - options={organizationOptions} - tagRender={(props) => { - const { label, closable, onClose } = props; - return ( - } - data-cy={`widget-settings-tag-select-${label}`}> - {label} - - ); - }} - data-cy="widget-settings-organizer-select" - /> - - - - - {t(`${localePath}.placeholder.OrganizationsAndPeople`)}} - clearIcon={} - notFoundContent={ - isEntitiesFetching ? ( -
- -
- ) : ( - - ) - } - options={personOptions} - tagRender={(props) => { - const { label, closable, onClose } = props; - return ( - } - data-cy={`widget-settings-tag-select-${label}`}> - {label} - - ); - }} - data-cy="widget-settings-person-select" - /> - - - - - - -

- {t(`${localePath}.codeSectionTitle`)} -

-

- {t(`${localePath}.codeSectionInfo`)} -

- - - -
- {iframeCode} - { - form - .validateFields(['width', 'height', 'limit', 'color']) - .then(() => { - copyText({ - textToCopy: iframeCode, - message: t(`${localePath}.copyNotification`), - }); - }) - .catch((error) => { - error?.errorFields?.map((e, index) => { - notify({ - index, - messageText: e.errors[0] != ' ' ? e.errors[0] : t(`${localePath}.validation.color`), + + + + { + if (!value || !/^[1-9][0-9]*$/.test(value)) { + return Promise.reject(t(`${localePath}.validation.height`)); + } + return Promise.resolve(); + }, + }, + ]} + validateTrigger={['onChange', 'onBlur']} + data-cy="widget-settings-height"> + + + + + + { + if (value?.trim() === '') return Promise.resolve(); + if (!value || !/^[1-9][0-9]*$/.test(value)) { + return Promise.reject(t(`${localePath}.validation.width`)); + } + return Promise.resolve(); + }, + }, + ]} + data-cy="widget-settings-width"> + + + + + + + + + +

+ {t(`${localePath}.filterHeading`)} +

+

+ {t(`${localePath}.filterSectionDescription`)} +

+ + + + + {t(`${localePath}.placeholder.eventType`)}} + allowClear + treeDefaultExpandAll + notFoundContent={} + clearIcon={} + treeData={treeTaxonomyOptions( + taxonomyDataEventType, + user, + 'EventType', + false, + calendarContentLanguage, + )} + tagRender={(props) => { + const { label, closable, onClose } = props; + return ( + } + data-cy={`tag-event-type-${label}`}> + {label} + + ); + }} + data-cy="widget-settings-treeselect-event-type" + /> + + + + + + {t(`${localePath}.placeholder`)}} + options={languageOptions} + /> + + + + + + } + placeholder={{t(`${localePath}.placeholder.region`)}} + clearIcon={} + treeData={treeTaxonomyOptions( + taxonomyDataRegion, + user, + placeTaxonomyMappedFieldTypes.REGION, + false, + calendarContentLanguage, + )} + tagRender={(props) => { + const { label, closable, onClose } = props; + return ( + }> + {label} + + ); + }} + /> + + + + + + { + setSearchKey(newValue); + }} + onBlur={() => { + debounceSearchPlace(''); + }} + allowClear + placeholder={{t(`${localePath}.placeholder.place`)}} + clearIcon={} + options={locationOptions} + notFoundContent={ + isEntitiesFetching ? ( +
+ +
+ ) : ( + + ) + } + tagRender={(props) => { + const { label, closable, onClose } = props; + return ( + } + data-cy={`widget-settings-tag-select-${label}`}> + {label} + + ); + }} + data-cy="widget-settings-location-select" + /> + + + + + {t(`${localePath}.placeholder.OrganizationsAndPeople`)}} + clearIcon={} + notFoundContent={ + isEntitiesFetching ? ( +
+ +
+ ) : ( + + ) + } + options={organizationOptions} + tagRender={(props) => { + const { label, closable, onClose } = props; + return ( + } + data-cy={`widget-settings-tag-select-${label}`}> + {label} + + ); + }} + data-cy="widget-settings-organizer-select" + /> + + + + + {t(`${localePath}.placeholder.OrganizationsAndPeople`)}} + clearIcon={} + notFoundContent={ + isEntitiesFetching ? ( +
+ +
+ ) : ( + + ) + } + options={personOptions} + tagRender={(props) => { + const { label, closable, onClose } = props; + return ( + } + data-cy={`widget-settings-tag-select-${label}`}> + {label} + + ); + }} + data-cy="widget-settings-person-select" + /> + + + + + + +

+ {t(`${localePath}.codeSectionTitle`)} +

+

+ {t(`${localePath}.codeSectionInfo`)} +

+ + + +
+ {iframeCode} + { + form + .validateFields(['width', 'height', 'limit', 'color']) + .then(() => { + copyText({ + textToCopy: iframeCode, + message: t(`${localePath}.copyNotification`), + }); + }) + .catch((error) => { + error?.errorFields?.map((e, index) => { + notify({ + index, + messageText: + e.errors[0] != ' ' ? e.errors[0] : t(`${localePath}.validation.color`), + }); + }); }); + }} + icon={} + data-cy="button-copy" + /> +
+ + + +
+ + +
+
+ {t(`${localePath}.previewMobile`)} + { + form + .validateFields(['width', 'height', 'limit', 'color']) + .then(() => { + setPreviewModal(true); + }) + .catch((error) => { + error?.errorFields?.map((e, index) => { + notify({ + index, + messageText: e.errors[0] != ' ' ? e.errors[0] : t(`${localePath}.validation.color`), }); }); - }} - icon={} - data-cy="button-copy" - /> -
- - - -
- - -
-
- {t(`${localePath}.previewMobile`)} - { - form - .validateFields(['width', 'height', 'limit', 'color']) - .then(() => { - setPreviewModal(true); - }) - .catch((error) => { - error?.errorFields?.map((e, index) => { - notify({ - index, - messageText: e.errors[0] != ' ' ? e.errors[0] : t(`${localePath}.validation.color`), }); - }); - }); - }} - /> -
- - {!screens.lg ? t(`${localePath}.previewMobileBtn`) : t(`${localePath}.previewDesktop`)} - - } - footer={null} - onCancel={() => setPreviewModal(false)}> - - - -
+ }} + /> +
+ + {!screens.lg ? t(`${localePath}.previewMobileBtn`) : t(`${localePath}.previewDesktop`)} + + } + footer={null} + onCancel={() => setPreviewModal(false)}> + + + +
+ + - - + ) : ( +
+ +
+ )} + ); }; diff --git a/src/pages/Dashboard/Settings/WidgetSettings/widgetSettings.css b/src/pages/Dashboard/Settings/WidgetSettings/widgetSettings.css index 0cd68c564..8dc19fc5d 100644 --- a/src/pages/Dashboard/Settings/WidgetSettings/widgetSettings.css +++ b/src/pages/Dashboard/Settings/WidgetSettings/widgetSettings.css @@ -137,6 +137,13 @@ gap: 10px; } +.loading-container { + width: '100%'; + height: 500px; + display: grid; + place-content: center; +} + .widget-settings .widget-settings-code-container > span { white-space: nowrap; overflow: hidden;