From 5cb54d5cfb6126af4f4786c39feaded4cf910822 Mon Sep 17 00:00:00 2001 From: syam babu Date: Thu, 4 Apr 2024 17:44:02 +0530 Subject: [PATCH 01/22] fix: created slice to handle language literals --- .../ContentLanguageInput.jsx | 12 +++++- src/pages/Dashboard/AddEvent/AddEvent.jsx | 41 ++++++++++++++++--- src/pages/Dashboard/AddEvent/addEvent.css | 4 ++ src/redux/reducer/languageLiteralSlice.js | 21 ++++++++++ src/redux/store.js | 2 + 5 files changed, 73 insertions(+), 7 deletions(-) create mode 100644 src/redux/reducer/languageLiteralSlice.js diff --git a/src/components/ContentLanguageInput/ContentLanguageInput.jsx b/src/components/ContentLanguageInput/ContentLanguageInput.jsx index d8c133c1a..8085631c5 100644 --- a/src/components/ContentLanguageInput/ContentLanguageInput.jsx +++ b/src/components/ContentLanguageInput/ContentLanguageInput.jsx @@ -1,18 +1,28 @@ -/* eslint-disable no-unused-vars */ import React, { useEffect, cloneElement, useState, useMemo } from 'react'; import { useOutletContext } from 'react-router-dom'; import { contentLanguage } from '../../constants/contentLanguage'; import { languageFallbackSetup } from '../../utils/languageFallbackSetup'; import LiteralBadge from '../Badge/LiteralBadge'; import { useTranslation } from 'react-i18next'; +import { useDispatch } from 'react-redux'; +import { setLanguageLiteralBannerDisplayStatus } from '../../redux/reducer/languageLiteralSlice'; function ContentLanguageInput(props) { const { children, calendarContentLanguage } = props; const { t } = useTranslation(); + const dispatch = useDispatch(); + + // eslint-disable-next-line no-unused-vars const [currentCalendarData, _pageNumber, _setPageNumber, _getCalendar] = useOutletContext(); const [fallbackStatus, setFallbackStatus] = useState(null); + useEffect(() => { + if (fallbackStatus?.fr?.tagDisplayStatus || fallbackStatus?.en?.tagDisplayStatus) { + dispatch(setLanguageLiteralBannerDisplayStatus(true)); + } + }, [fallbackStatus]); + useEffect(() => { if (!currentCalendarData) return; diff --git a/src/pages/Dashboard/AddEvent/AddEvent.jsx b/src/pages/Dashboard/AddEvent/AddEvent.jsx index b957b764a..abe44a905 100644 --- a/src/pages/Dashboard/AddEvent/AddEvent.jsx +++ b/src/pages/Dashboard/AddEvent/AddEvent.jsx @@ -13,6 +13,7 @@ import { PlusCircleOutlined, } from '@ant-design/icons'; import moment from 'moment-timezone'; +import OutlinedButton from '../../../components/Button/Outlined'; import i18n from 'i18next'; import { useAddEventMutation, useUpdateEventMutation } from '../../../services/events'; import { useNavigate, useParams, useSearchParams, useOutletContext, useLocation } from 'react-router-dom'; @@ -21,7 +22,7 @@ import { PathName } from '../../../constants/pathName'; import Outlined from '../../../components/Button/Outlined'; import PrimaryButton from '../../../components/Button/Primary'; import { useTranslation } from 'react-i18next'; -import { useSelector } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { getUserDetails } from '../../../redux/reducer/userSlice'; import { userRoles } from '../../../constants/userRoles'; import PublishState from '../../../components/Dropdown/PublishState/PublishState'; @@ -94,11 +95,16 @@ import Alert from '../../../components/Alert'; import ChangeTypeLayout from '../../../layout/ChangeTypeLayout/ChangeTypeLayout'; import { getEmbedUrl, validateVimeoURL, validateYouTubeURL } from '../../../utils/getEmbedVideoUrl'; import { sameAsTypes } from '../../../constants/sameAsTypes'; +import { + getLanguageLiteralBannerDisplayStatus, + setLanguageLiteralBannerDisplayStatus, +} from '../../../redux/reducer/languageLiteralSlice'; const { TextArea } = Input; function AddEvent() { const navigate = useNavigate(); + const dispatch = useDispatch(); const location = useLocation(); const [form] = Form.useForm(); Form.useWatch('startTime', form); @@ -108,6 +114,8 @@ function AddEvent() { let [searchParams] = useSearchParams(); let duplicateId = searchParams.get('duplicateId'); const { user } = useSelector(getUserDetails); + + const languageLiteralBannerDisplayStatus = useSelector(getLanguageLiteralBannerDisplayStatus); const { t } = useTranslation(); const [ currentCalendarData, // eslint-disable-next-line no-unused-vars @@ -198,10 +206,6 @@ function AddEvent() { setContentBackgroundColor('#F9FAFF'); - useEffect(() => { - console.log(organizersList); - }, [organizersList]); - const reactQuillRefFr = useRef(null); const reactQuillRefEn = useRef(null); @@ -1129,6 +1133,7 @@ function AddEvent() { } } }; + useEffect(() => { if (isError) navigate(`${PathName.NotFound}`); }, [isError]); @@ -1562,7 +1567,31 @@ function AddEvent() { )} - + {languageLiteralBannerDisplayStatus && ( + + + + + + dispatch(setLanguageLiteralBannerDisplayStatus(false))} + /> + } + /> + + + + + + )} <> {artsDataLink?.length > 0 && ( diff --git a/src/pages/Dashboard/AddEvent/addEvent.css b/src/pages/Dashboard/AddEvent/addEvent.css index 6a90168bc..1fa29fcf3 100644 --- a/src/pages/Dashboard/AddEvent/addEvent.css +++ b/src/pages/Dashboard/AddEvent/addEvent.css @@ -197,6 +197,10 @@ padding: 0px; } +.event-form-wrapper .language-literal-banner .ant-alert-message { + color: #1572bb; +} + @media screen and (max-width: 480px) { .add-edit-wrapper .add-edit-event-heading h4 { font-size: 24px; diff --git a/src/redux/reducer/languageLiteralSlice.js b/src/redux/reducer/languageLiteralSlice.js new file mode 100644 index 000000000..c7180784a --- /dev/null +++ b/src/redux/reducer/languageLiteralSlice.js @@ -0,0 +1,21 @@ +import { createSlice } from '@reduxjs/toolkit'; + +const initialState = { + status: false, +}; + +export const languageLiteralSlice = createSlice({ + name: 'languageLiteral', + initialState, + reducers: { + setLanguageLiteralBannerDisplayStatus: (state, action) => { + state.status = action.payload; + }, + }, +}); + +export const { setLanguageLiteralBannerDisplayStatus } = languageLiteralSlice.actions; + +export const getLanguageLiteralBannerDisplayStatus = (state) => state?.languageLiteral?.status; + +export default languageLiteralSlice.reducer; diff --git a/src/redux/store.js b/src/redux/store.js index f0c22be37..13a117978 100644 --- a/src/redux/store.js +++ b/src/redux/store.js @@ -19,6 +19,7 @@ import { peopleApi } from '../services/people'; import { postalAddressApi } from '../services/postalAddress'; import ErrorSliceReducer from './reducer/ErrorSlice'; import { externalSourceApi } from '../services/externalSource'; +import languageLiteralReducer from './reducer/languageLiteralSlice'; // import localforage from 'localforage'; const persistConfig = { @@ -46,6 +47,7 @@ const appReducer = combineReducers({ interfaceLanguage: interfaceLanguageReducer, selectedCalendar: selectedCalendarReducer, errors: ErrorSliceReducer, + languageLiteral: languageLiteralReducer, [loginApi.reducerPath]: loginApi.reducer, [usersApi.reducerPath]: usersApi.reducer, [eventsApi.reducerPath]: eventsApi.reducer, From 108a0b4427fc8cfbb9fe0cede8a9c7375a7215e4 Mon Sep 17 00:00:00 2001 From: syam babu Date: Mon, 8 Apr 2024 16:58:19 +0530 Subject: [PATCH 02/22] fix: implememtned language litaral banned functionality --- .../ContentLanguageInput.jsx | 17 +++++-- src/pages/Dashboard/AddEvent/AddEvent.jsx | 50 ++++++++++++++----- src/redux/reducer/languageLiteralSlice.js | 7 ++- 3 files changed, 57 insertions(+), 17 deletions(-) diff --git a/src/components/ContentLanguageInput/ContentLanguageInput.jsx b/src/components/ContentLanguageInput/ContentLanguageInput.jsx index 8085631c5..53d53f769 100644 --- a/src/components/ContentLanguageInput/ContentLanguageInput.jsx +++ b/src/components/ContentLanguageInput/ContentLanguageInput.jsx @@ -4,13 +4,14 @@ import { contentLanguage } from '../../constants/contentLanguage'; import { languageFallbackSetup } from '../../utils/languageFallbackSetup'; import LiteralBadge from '../Badge/LiteralBadge'; import { useTranslation } from 'react-i18next'; -import { useDispatch } from 'react-redux'; -import { setLanguageLiteralBannerDisplayStatus } from '../../redux/reducer/languageLiteralSlice'; +import { useDispatch, useSelector } from 'react-redux'; +import { getActiveFallbackFieldsInfo, setActiveFallbackFieldsInfo } from '../../redux/reducer/languageLiteralSlice'; function ContentLanguageInput(props) { const { children, calendarContentLanguage } = props; const { t } = useTranslation(); const dispatch = useDispatch(); + const activeFallbackFieldsInfo = useSelector(getActiveFallbackFieldsInfo); // eslint-disable-next-line no-unused-vars const [currentCalendarData, _pageNumber, _setPageNumber, _getCalendar] = useOutletContext(); @@ -18,8 +19,18 @@ function ContentLanguageInput(props) { const [fallbackStatus, setFallbackStatus] = useState(null); useEffect(() => { + const combinedName = children?.props?.children?.map((child) => child?.props?.name).join(''); + const modifiedActiveFallbackFieldsInfo = { + ...activeFallbackFieldsInfo, + [combinedName]: fallbackStatus, + }; if (fallbackStatus?.fr?.tagDisplayStatus || fallbackStatus?.en?.tagDisplayStatus) { - dispatch(setLanguageLiteralBannerDisplayStatus(true)); + dispatch(setActiveFallbackFieldsInfo(modifiedActiveFallbackFieldsInfo)); + } else { + // eslint-disable-next-line no-unused-vars + const { [combinedName]: _, ...rest } = activeFallbackFieldsInfo; + + dispatch(setActiveFallbackFieldsInfo(rest)); } }, [fallbackStatus]); diff --git a/src/pages/Dashboard/AddEvent/AddEvent.jsx b/src/pages/Dashboard/AddEvent/AddEvent.jsx index abe44a905..341abe1ac 100644 --- a/src/pages/Dashboard/AddEvent/AddEvent.jsx +++ b/src/pages/Dashboard/AddEvent/AddEvent.jsx @@ -13,7 +13,6 @@ import { PlusCircleOutlined, } from '@ant-design/icons'; import moment from 'moment-timezone'; -import OutlinedButton from '../../../components/Button/Outlined'; import i18n from 'i18next'; import { useAddEventMutation, useUpdateEventMutation } from '../../../services/events'; import { useNavigate, useParams, useSearchParams, useOutletContext, useLocation } from 'react-router-dom'; @@ -21,6 +20,7 @@ import { useGetEventQuery, useUpdateEventStateMutation } from '../../../services import { PathName } from '../../../constants/pathName'; import Outlined from '../../../components/Button/Outlined'; import PrimaryButton from '../../../components/Button/Primary'; +import OutlinedButton from '../../..//components/Button/Outlined'; import { useTranslation } from 'react-i18next'; import { useDispatch, useSelector } from 'react-redux'; import { getUserDetails } from '../../../redux/reducer/userSlice'; @@ -96,6 +96,7 @@ import ChangeTypeLayout from '../../../layout/ChangeTypeLayout/ChangeTypeLayout' import { getEmbedUrl, validateVimeoURL, validateYouTubeURL } from '../../../utils/getEmbedVideoUrl'; import { sameAsTypes } from '../../../constants/sameAsTypes'; import { + getActiveFallbackFieldsInfo, getLanguageLiteralBannerDisplayStatus, setLanguageLiteralBannerDisplayStatus, } from '../../../redux/reducer/languageLiteralSlice'; @@ -104,8 +105,8 @@ const { TextArea } = Input; function AddEvent() { const navigate = useNavigate(); - const dispatch = useDispatch(); const location = useLocation(); + const dispatch = useDispatch(); const [form] = Form.useForm(); Form.useWatch('startTime', form); Form.useWatch('endTime', form); @@ -114,7 +115,7 @@ function AddEvent() { let [searchParams] = useSearchParams(); let duplicateId = searchParams.get('duplicateId'); const { user } = useSelector(getUserDetails); - + const activeFallbackFieldsInfo = useSelector(getActiveFallbackFieldsInfo); const languageLiteralBannerDisplayStatus = useSelector(getLanguageLiteralBannerDisplayStatus); const { t } = useTranslation(); const [ @@ -1134,6 +1135,27 @@ function AddEvent() { } }; + useEffect(() => { + let shouldDisplay = true; + + for (let key in activeFallbackFieldsInfo) { + if (Object.prototype.hasOwnProperty.call(activeFallbackFieldsInfo, key)) { + const tagDisplayStatus = + activeFallbackFieldsInfo[key]?.en?.tagDisplayStatus || activeFallbackFieldsInfo[key]?.fr?.tagDisplayStatus; + if (tagDisplayStatus) { + shouldDisplay = false; + break; + } + } + } + + if (!shouldDisplay) { + dispatch(setLanguageLiteralBannerDisplayStatus(true)); + } else { + dispatch(setLanguageLiteralBannerDisplayStatus(false)); + } + }, [activeFallbackFieldsInfo]); + useEffect(() => { if (isError) navigate(`${PathName.NotFound}`); }, [isError]); @@ -1567,6 +1589,7 @@ function AddEvent() { )} + {languageLiteralBannerDisplayStatus && ( @@ -1592,6 +1615,7 @@ function AddEvent() { )} + <> {artsDataLink?.length > 0 && ( @@ -1697,7 +1721,7 @@ function AddEvent() { ? '4px solid #E8E8E8' : '1px solid #b6c1c9' }`, - maxWidth: '423px', + width: '423px', }} size="large" data-cy="text-area-event-french-name" @@ -1731,7 +1755,7 @@ function AddEvent() { ? '4px solid #E8E8E8' : '1px solid #b6c1c9' }`, - maxWidth: '423px', + width: '423px', }} size="large" data-cy="text-area-event-english-name" @@ -2426,7 +2450,7 @@ function AddEvent() { ? '4px solid #E8E8E8' : '1px solid #b6c1c9' }`, - maxWidth: '423px', + width: '423px', }} size="large" data-cy="text-area-virtual-location-french" @@ -2448,7 +2472,7 @@ function AddEvent() { ? '4px solid #E8E8E8' : '1px solid #b6c1c9' }`, - maxWidth: '423px', + width: '423px', }} size="large" data-cy="text-area-virtual-location-english" @@ -3000,7 +3024,7 @@ function AddEvent() { ? '4px solid #E8E8E8' : '1px solid #b6c1c9' }`, - maxWidth: '423px', + width: '423px', }} size="large" data-cy="input-contact-title-french" @@ -3023,7 +3047,7 @@ function AddEvent() { ? '4px solid #E8E8E8' : '1px solid #b6c1c9' }`, - maxWidth: '423px', + width: '423px', }} size="large" data-cy="input-contact-title-english" @@ -3839,7 +3863,7 @@ function AddEvent() { ? '4px solid #E8E8E8' : '1px solid #b6c1c9' }`, - maxWidth: '423px', + width: '423px', resize: 'vertical', }} size="large" @@ -3862,7 +3886,7 @@ function AddEvent() { ? '4px solid #E8E8E8' : '1px solid #b6c1c9' }`, - maxWidth: '423px', + width: '423px', resize: 'vertical', }} size="large" @@ -4272,7 +4296,7 @@ function AddEvent() { ? '4px solid #E8E8E8' : '1px solid #b6c1c9' }`, - maxWidth: '423px', + width: '423px', resize: 'vertical', }} size="large" @@ -4320,7 +4344,7 @@ function AddEvent() { ? '4px solid #E8E8E8' : '1px solid #b6c1c9' }`, - maxWidth: '423px', + width: '423px', resize: 'vertical', }} size="large" diff --git a/src/redux/reducer/languageLiteralSlice.js b/src/redux/reducer/languageLiteralSlice.js index c7180784a..779e992ba 100644 --- a/src/redux/reducer/languageLiteralSlice.js +++ b/src/redux/reducer/languageLiteralSlice.js @@ -2,6 +2,7 @@ import { createSlice } from '@reduxjs/toolkit'; const initialState = { status: false, + activeFallbackFieldsInfo: {}, }; export const languageLiteralSlice = createSlice({ @@ -11,11 +12,15 @@ export const languageLiteralSlice = createSlice({ setLanguageLiteralBannerDisplayStatus: (state, action) => { state.status = action.payload; }, + setActiveFallbackFieldsInfo: (state, action) => { + state.activeFallbackFieldsInfo = action.payload; + }, }, }); -export const { setLanguageLiteralBannerDisplayStatus } = languageLiteralSlice.actions; +export const { setLanguageLiteralBannerDisplayStatus, setActiveFallbackFieldsInfo } = languageLiteralSlice.actions; export const getLanguageLiteralBannerDisplayStatus = (state) => state?.languageLiteral?.status; +export const getActiveFallbackFieldsInfo = (state) => state?.languageLiteral?.activeFallbackFieldsInfo; export default languageLiteralSlice.reducer; From 69636ed57caa232c59022b821caaf99713c3931a Mon Sep 17 00:00:00 2001 From: syam babu Date: Mon, 8 Apr 2024 22:49:00 +0530 Subject: [PATCH 03/22] fix: banner toggle fixed for datacentric forms --- .../List/SelectionItem/SelectionItem.jsx | 14 +-- .../CreateNewOrganization.jsx | 60 ++++++++- .../CreateNewPlace/CreateNewPlace.jsx | 114 ++++++++++++++++-- 3 files changed, 165 insertions(+), 23 deletions(-) diff --git a/src/components/List/SelectionItem/SelectionItem.jsx b/src/components/List/SelectionItem/SelectionItem.jsx index 86c3c8ceb..8179b94ae 100644 --- a/src/components/List/SelectionItem/SelectionItem.jsx +++ b/src/components/List/SelectionItem/SelectionItem.jsx @@ -9,8 +9,6 @@ import { getUserDetails } from '../../../redux/reducer/userSlice'; import ArtsDataLink from '../../Tags/ArtsDataLink/ArtsDataLink'; import SmallButton from '../../Button/SmallButton'; import ReadOnlyProtectedComponent from '../../../layout/ReadOnlyProtectedComponent'; -import { useOutletContext } from 'react-router-dom'; -import { languageFallbackSetup } from '../../../utils/languageFallbackSetup'; function SelectionItem(props) { const { @@ -36,17 +34,7 @@ function SelectionItem(props) { const { t } = useTranslation(); const { user } = useSelector(getUserDetails); // eslint-disable-next-line no-unused-vars - const [currentCalendarData, _pageNumber, _setPageNumber, _getCalendar] = useOutletContext(); - - // eslint-disable-next-line no-unused-vars - const status = languageFallbackSetup({ - currentCalendarData, - fieldData: name, - languageFallbacks: currentCalendarData.languageFallbacks, - isFieldsDirty: false, - }); - - // console.log('status', status); + // const [currentCalendarData, _pageNumber, _setPageNumber, _getCalendar] = useOutletContext(); return (
{ + let shouldDisplay = true; + + for (let key in activeFallbackFieldsInfo) { + if (Object.prototype.hasOwnProperty.call(activeFallbackFieldsInfo, key)) { + const tagDisplayStatus = + activeFallbackFieldsInfo[key]?.en?.tagDisplayStatus || activeFallbackFieldsInfo[key]?.fr?.tagDisplayStatus; + if (tagDisplayStatus) { + shouldDisplay = false; + break; + } + } + } + + if (!shouldDisplay) { + dispatch(setLanguageLiteralBannerDisplayStatus(true)); + } else { + dispatch(setLanguageLiteralBannerDisplayStatus(false)); + } + }, [activeFallbackFieldsInfo]); + useEffect(() => { if (calendarId && currentCalendarData) { let initialPlaceAccessibiltiy = [], @@ -891,6 +922,32 @@ function CreateNewOrganization() {
+ + {!languageLiteralBannerDisplayStatus && ( + + + + + + dispatch(setLanguageLiteralBannerDisplayStatus(false))} + /> + } + /> + + + + + + )} {fields?.map((section, index) => { @@ -954,6 +1011,7 @@ function CreateNewOrganization() { +

diff --git a/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx b/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx index 7a4ccc18d..09b579fbd 100644 --- a/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx +++ b/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx @@ -14,6 +14,7 @@ import Icon, { CalendarOutlined, SearchOutlined, } from '@ant-design/icons'; +import OutlinedButton from '../../..//components/Button/Outlined'; import PrimaryButton from '../../../components/Button/Primary'; import { useLocation, useNavigate, useOutletContext, useParams, useSearchParams } from 'react-router-dom'; import { getUserDetails } from '../../../redux/reducer/userSlice'; @@ -28,7 +29,7 @@ import { useLazyGetPlaceQuery, useUpdatePlaceMutation, } from '../../../services/places'; -import { useSelector } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { routinghandler } from '../../../utils/roleRoutingHandler'; import ContentLanguageInput from '../../../components/ContentLanguageInput'; import Card from '../../../components/Card/Common/Event'; @@ -82,6 +83,12 @@ import { useLazyGetExternalSourceQuery } from '../../../services/externalSource' import { sameAsTypes } from '../../../constants/sameAsTypes'; import ChangeTypeLayout from '../../../layout/ChangeTypeLayout/ChangeTypeLayout'; import moment from 'moment'; +import { + getActiveFallbackFieldsInfo, + getLanguageLiteralBannerDisplayStatus, + setLanguageLiteralBannerDisplayStatus, +} from '../../../redux/reducer/languageLiteralSlice'; +import Alert from '../../../components/Alert'; const { TextArea } = Input; @@ -89,6 +96,7 @@ function CreateNewPlace() { const timestampRef = useRef(Date.now()).current; const [form] = Form.useForm(); const { t } = useTranslation(); + const dispatch = useDispatch(); const navigate = useNavigate(); const location = useLocation(); const [ @@ -100,6 +108,8 @@ function CreateNewPlace() { isReadOnly, ] = useOutletContext(); setContentBackgroundColor('#F9FAFF'); + const activeFallbackFieldsInfo = useSelector(getActiveFallbackFieldsInfo); + const languageLiteralBannerDisplayStatus = useSelector(getLanguageLiteralBannerDisplayStatus); const { user } = useSelector(getUserDetails); const { calendarId } = useParams(); let [searchParams] = useSearchParams(); @@ -777,6 +787,27 @@ function CreateNewPlace() { } }, []); + useEffect(() => { + let shouldDisplay = true; + console.log(activeFallbackFieldsInfo); + for (let key in activeFallbackFieldsInfo) { + if (Object.prototype.hasOwnProperty.call(activeFallbackFieldsInfo, key)) { + const tagDisplayStatus = + activeFallbackFieldsInfo[key]?.en?.tagDisplayStatus || activeFallbackFieldsInfo[key]?.fr?.tagDisplayStatus; + if (tagDisplayStatus) { + shouldDisplay = false; + break; + } + } + } + + if (!shouldDisplay) { + dispatch(setLanguageLiteralBannerDisplayStatus(true)); + } else { + dispatch(setLanguageLiteralBannerDisplayStatus(false)); + } + }, [activeFallbackFieldsInfo]); + useEffect(() => { if (selectedContainsPlaces) form.setFieldValue(formFieldNames.CONTAINS_PLACE, selectedContainsPlaces); }, [selectedContainsPlaces]); @@ -1051,6 +1082,31 @@ function CreateNewPlace() {
+ {!languageLiteralBannerDisplayStatus && ( + + + + + + dispatch(setLanguageLiteralBannerDisplayStatus(false))} + /> + } + /> + + + + + + )} @@ -1111,7 +1167,12 @@ function CreateNewPlace() { )} - + - + - + - + - + - + - + - + Date: Mon, 8 Apr 2024 22:59:48 +0530 Subject: [PATCH 04/22] fix: minor fix --- .../Dashboard/CreateNewOrganization/CreateNewOrganization.jsx | 2 +- src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/Dashboard/CreateNewOrganization/CreateNewOrganization.jsx b/src/pages/Dashboard/CreateNewOrganization/CreateNewOrganization.jsx index 1bc3d5d6d..e81550091 100644 --- a/src/pages/Dashboard/CreateNewOrganization/CreateNewOrganization.jsx +++ b/src/pages/Dashboard/CreateNewOrganization/CreateNewOrganization.jsx @@ -923,7 +923,7 @@ function CreateNewOrganization() { - {!languageLiteralBannerDisplayStatus && ( + {languageLiteralBannerDisplayStatus && ( diff --git a/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx b/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx index 09b579fbd..d6e3fecb4 100644 --- a/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx +++ b/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx @@ -1082,7 +1082,7 @@ function CreateNewPlace() { - {!languageLiteralBannerDisplayStatus && ( + {languageLiteralBannerDisplayStatus && ( From 1f45a9414c8ae9010daad40e6259b9b05d2c6114 Mon Sep 17 00:00:00 2001 From: syam babu Date: Tue, 9 Apr 2024 12:29:12 +0530 Subject: [PATCH 05/22] fix: fixed issue with unneeded dispatch to language literal slice --- .../ContentLanguageInput.jsx | 7 +++---- .../Dashboard/CreateNewPlace/CreateNewPlace.jsx | 16 ++++++++-------- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/src/components/ContentLanguageInput/ContentLanguageInput.jsx b/src/components/ContentLanguageInput/ContentLanguageInput.jsx index 53d53f769..4e0b79c7c 100644 --- a/src/components/ContentLanguageInput/ContentLanguageInput.jsx +++ b/src/components/ContentLanguageInput/ContentLanguageInput.jsx @@ -8,7 +8,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { getActiveFallbackFieldsInfo, setActiveFallbackFieldsInfo } from '../../redux/reducer/languageLiteralSlice'; function ContentLanguageInput(props) { - const { children, calendarContentLanguage } = props; + const { children, calendarContentLanguage, isFieldsDirty } = props; const { t } = useTranslation(); const dispatch = useDispatch(); const activeFallbackFieldsInfo = useSelector(getActiveFallbackFieldsInfo); @@ -26,10 +26,9 @@ function ContentLanguageInput(props) { }; if (fallbackStatus?.fr?.tagDisplayStatus || fallbackStatus?.en?.tagDisplayStatus) { dispatch(setActiveFallbackFieldsInfo(modifiedActiveFallbackFieldsInfo)); - } else { + } else if (isFieldsDirty?.en || isFieldsDirty?.fr) { // eslint-disable-next-line no-unused-vars const { [combinedName]: _, ...rest } = activeFallbackFieldsInfo; - dispatch(setActiveFallbackFieldsInfo(rest)); } }, [fallbackStatus]); @@ -41,7 +40,7 @@ function ContentLanguageInput(props) { currentCalendarData, fieldData: children?.props?.fieldData, languageFallbacks: currentCalendarData.languageFallbacks, - isFieldsDirty: props?.isFieldsDirty, + isFieldsDirty: isFieldsDirty, }); // Only update fallbackStatus if it has actually changed diff --git a/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx b/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx index d6e3fecb4..62cea897b 100644 --- a/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx +++ b/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx @@ -1169,7 +1169,7 @@ function CreateNewPlace() { @@ -1335,7 +1335,7 @@ function CreateNewPlace() { label={t('dashboard.places.createNew.addPlace.disambiguatingDescription.disambiguatingDescription')}> @@ -1421,7 +1421,7 @@ function CreateNewPlace() { data-cy="form-item-place-description-title"> @@ -1674,7 +1674,7 @@ function CreateNewPlace() { data-cy="form-item-street-address-title"> @@ -1782,7 +1782,7 @@ function CreateNewPlace() { data-cy="form-item-place-city-title"> @@ -1890,7 +1890,7 @@ function CreateNewPlace() { data-cy="form-item-province-title"> @@ -1976,7 +1976,7 @@ function CreateNewPlace() { data-cy="form-item-country-title"> @@ -2649,7 +2649,7 @@ function CreateNewPlace() { }}> From df6a905de3070ca2628176e9c8369b08d8af4e0b Mon Sep 17 00:00:00 2001 From: syam babu Date: Tue, 9 Apr 2024 13:47:43 +0530 Subject: [PATCH 06/22] fixed: all the redux issues --- .../ContentLanguageInput.jsx | 10 +++++++- src/pages/Dashboard/AddEvent/AddEvent.jsx | 6 ++++- .../CreateNewOrganization.jsx | 6 ++++- .../CreateNewPlace/CreateNewPlace.jsx | 23 +++++++++++-------- 4 files changed, 32 insertions(+), 13 deletions(-) diff --git a/src/components/ContentLanguageInput/ContentLanguageInput.jsx b/src/components/ContentLanguageInput/ContentLanguageInput.jsx index 4e0b79c7c..2c7c8e8a1 100644 --- a/src/components/ContentLanguageInput/ContentLanguageInput.jsx +++ b/src/components/ContentLanguageInput/ContentLanguageInput.jsx @@ -19,11 +19,19 @@ function ContentLanguageInput(props) { const [fallbackStatus, setFallbackStatus] = useState(null); useEffect(() => { - const combinedName = children?.props?.children?.map((child) => child?.props?.name).join(''); + const combinedName = children?.props?.children + ?.map((child) => { + if (child?.props?.name) return child?.props?.name; + if (child?.props?.formName) return child?.props?.formName; + else return ''; + }) + .join(''); + const modifiedActiveFallbackFieldsInfo = { ...activeFallbackFieldsInfo, [combinedName]: fallbackStatus, }; + if (fallbackStatus?.fr?.tagDisplayStatus || fallbackStatus?.en?.tagDisplayStatus) { dispatch(setActiveFallbackFieldsInfo(modifiedActiveFallbackFieldsInfo)); } else if (isFieldsDirty?.en || isFieldsDirty?.fr) { diff --git a/src/pages/Dashboard/AddEvent/AddEvent.jsx b/src/pages/Dashboard/AddEvent/AddEvent.jsx index 341abe1ac..242e93f9a 100644 --- a/src/pages/Dashboard/AddEvent/AddEvent.jsx +++ b/src/pages/Dashboard/AddEvent/AddEvent.jsx @@ -98,6 +98,7 @@ import { sameAsTypes } from '../../../constants/sameAsTypes'; import { getActiveFallbackFieldsInfo, getLanguageLiteralBannerDisplayStatus, + setActiveFallbackFieldsInfo, setLanguageLiteralBannerDisplayStatus, } from '../../../redux/reducer/languageLiteralSlice'; @@ -1605,7 +1606,10 @@ function AddEvent() { data-cy="button-change-interface-language" size="large" label={t('common.dismiss')} - onClick={() => dispatch(setLanguageLiteralBannerDisplayStatus(false))} + onClick={() => { + dispatch(setLanguageLiteralBannerDisplayStatus(false)); + dispatch(setActiveFallbackFieldsInfo({})); + }} /> } /> diff --git a/src/pages/Dashboard/CreateNewOrganization/CreateNewOrganization.jsx b/src/pages/Dashboard/CreateNewOrganization/CreateNewOrganization.jsx index e81550091..0d0be59fd 100644 --- a/src/pages/Dashboard/CreateNewOrganization/CreateNewOrganization.jsx +++ b/src/pages/Dashboard/CreateNewOrganization/CreateNewOrganization.jsx @@ -67,6 +67,7 @@ import moment from 'moment'; import { getActiveFallbackFieldsInfo, getLanguageLiteralBannerDisplayStatus, + setActiveFallbackFieldsInfo, setLanguageLiteralBannerDisplayStatus, } from '../../../redux/reducer/languageLiteralSlice'; import Alert from '../../../components/Alert'; @@ -938,7 +939,10 @@ function CreateNewOrganization() { data-cy="button-change-interface-language" size="large" label={t('common.dismiss')} - onClick={() => dispatch(setLanguageLiteralBannerDisplayStatus(false))} + onClick={() => { + dispatch(setLanguageLiteralBannerDisplayStatus(false)); + dispatch(setActiveFallbackFieldsInfo({})); + }} /> } /> diff --git a/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx b/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx index 62cea897b..c9f80d5cd 100644 --- a/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx +++ b/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx @@ -86,6 +86,7 @@ import moment from 'moment'; import { getActiveFallbackFieldsInfo, getLanguageLiteralBannerDisplayStatus, + setActiveFallbackFieldsInfo, setLanguageLiteralBannerDisplayStatus, } from '../../../redux/reducer/languageLiteralSlice'; import Alert from '../../../components/Alert'; @@ -789,7 +790,6 @@ function CreateNewPlace() { useEffect(() => { let shouldDisplay = true; - console.log(activeFallbackFieldsInfo); for (let key in activeFallbackFieldsInfo) { if (Object.prototype.hasOwnProperty.call(activeFallbackFieldsInfo, key)) { const tagDisplayStatus = @@ -1097,7 +1097,10 @@ function CreateNewPlace() { data-cy="button-change-interface-language" size="large" label={t('common.dismiss')} - onClick={() => dispatch(setLanguageLiteralBannerDisplayStatus(false))} + onClick={() => { + dispatch(setLanguageLiteralBannerDisplayStatus(false)); + dispatch(setActiveFallbackFieldsInfo({})); + }} /> } /> @@ -1169,7 +1172,7 @@ function CreateNewPlace() { @@ -1335,7 +1338,7 @@ function CreateNewPlace() { label={t('dashboard.places.createNew.addPlace.disambiguatingDescription.disambiguatingDescription')}> @@ -1421,7 +1424,7 @@ function CreateNewPlace() { data-cy="form-item-place-description-title"> @@ -1674,7 +1677,7 @@ function CreateNewPlace() { data-cy="form-item-street-address-title"> @@ -1782,7 +1785,7 @@ function CreateNewPlace() { data-cy="form-item-place-city-title"> @@ -1890,7 +1893,7 @@ function CreateNewPlace() { data-cy="form-item-province-title"> @@ -1976,7 +1979,7 @@ function CreateNewPlace() { data-cy="form-item-country-title"> @@ -2649,7 +2652,7 @@ function CreateNewPlace() { }}> From 82348c540044f430c819e9d228d3c41ca338cd91 Mon Sep 17 00:00:00 2001 From: syam babu Date: Tue, 9 Apr 2024 14:31:31 +0530 Subject: [PATCH 07/22] fix: fixed inintial fallback loading --- src/pages/Dashboard/AddEvent/AddEvent.jsx | 4 ++ .../CreateNewOrganization.jsx | 4 ++ .../CreateNewPerson/CreateNewPerson.jsx | 67 ++++++++++++++++++- .../CreateNewPlace/CreateNewPlace.jsx | 4 ++ 4 files changed, 78 insertions(+), 1 deletion(-) diff --git a/src/pages/Dashboard/AddEvent/AddEvent.jsx b/src/pages/Dashboard/AddEvent/AddEvent.jsx index 242e93f9a..c2df8ea5f 100644 --- a/src/pages/Dashboard/AddEvent/AddEvent.jsx +++ b/src/pages/Dashboard/AddEvent/AddEvent.jsx @@ -1136,6 +1136,10 @@ function AddEvent() { } }; + useEffect(() => { + dispatch(setActiveFallbackFieldsInfo({})); + }, []); + useEffect(() => { let shouldDisplay = true; diff --git a/src/pages/Dashboard/CreateNewOrganization/CreateNewOrganization.jsx b/src/pages/Dashboard/CreateNewOrganization/CreateNewOrganization.jsx index 0d0be59fd..5a0d79325 100644 --- a/src/pages/Dashboard/CreateNewOrganization/CreateNewOrganization.jsx +++ b/src/pages/Dashboard/CreateNewOrganization/CreateNewOrganization.jsx @@ -668,6 +668,10 @@ function CreateNewOrganization() { } }, [addedFields]); + useEffect(() => { + dispatch(setActiveFallbackFieldsInfo({})); + }, []); + useEffect(() => { let shouldDisplay = true; diff --git a/src/pages/Dashboard/CreateNewPerson/CreateNewPerson.jsx b/src/pages/Dashboard/CreateNewPerson/CreateNewPerson.jsx index 8aa96d7e7..b8a2af278 100644 --- a/src/pages/Dashboard/CreateNewPerson/CreateNewPerson.jsx +++ b/src/pages/Dashboard/CreateNewPerson/CreateNewPerson.jsx @@ -10,6 +10,7 @@ import Icon, { import { useTranslation } from 'react-i18next'; import { useLocation, useNavigate, useOutletContext, useParams, useSearchParams } from 'react-router-dom'; import { LeftOutlined } from '@ant-design/icons'; +import OutlinedButton from '../../..//components/Button/Outlined'; import PrimaryButton from '../../../components/Button/Primary'; import { ReactComponent as OrganizationLogo } from '../../../assets/icons/organization-light.svg'; import { featureFlags } from '../../../utils/featureFlags'; @@ -17,7 +18,7 @@ import FeatureFlag from '../../../layout/FeatureFlag/FeatureFlag'; import { entitiesClass } from '../../../constants/entitiesClass'; import Card from '../../../components/Card/Common/Event'; import { formCategory, formFieldValue, returnFormDataWithFields } from '../../../constants/formFields'; -import { useSelector } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { getUserDetails } from '../../../redux/reducer/userSlice'; import { bilingual, contentLanguageBilingual } from '../../../utils/bilingual'; import { taxonomyClass } from '../../../constants/taxonomyClass'; @@ -43,11 +44,19 @@ import { useGetEntitiesByIdQuery, useLazyGetEntityDependencyDetailsQuery } from import { sameAsTypes } from '../../../constants/sameAsTypes'; import SelectionItem from '../../../components/List/SelectionItem'; import moment from 'moment'; +import { + getActiveFallbackFieldsInfo, + getLanguageLiteralBannerDisplayStatus, + setActiveFallbackFieldsInfo, + setLanguageLiteralBannerDisplayStatus, +} from '../../../redux/reducer/languageLiteralSlice'; +import Alert from '../../../components/Alert'; function CreateNewPerson() { const timestampRef = useRef(Date.now()).current; const [form] = Form.useForm(); const { t } = useTranslation(); + const dispatch = useDispatch(); const navigate = useNavigate(); const location = useLocation(); const [ @@ -59,6 +68,8 @@ function CreateNewPerson() { isReadOnly, ] = useOutletContext(); setContentBackgroundColor('#F9FAFF'); + const languageLiteralBannerDisplayStatus = useSelector(getLanguageLiteralBannerDisplayStatus); + const activeFallbackFieldsInfo = useSelector(getActiveFallbackFieldsInfo); const { user } = useSelector(getUserDetails); const { calendarId } = useParams(); let [searchParams] = useSearchParams(); @@ -346,6 +357,31 @@ function CreateNewPerson() { }); }; + useEffect(() => { + dispatch(setActiveFallbackFieldsInfo({})); + }, []); + + useEffect(() => { + let shouldDisplay = true; + + for (let key in activeFallbackFieldsInfo) { + if (Object.prototype.hasOwnProperty.call(activeFallbackFieldsInfo, key)) { + const tagDisplayStatus = + activeFallbackFieldsInfo[key]?.en?.tagDisplayStatus || activeFallbackFieldsInfo[key]?.fr?.tagDisplayStatus; + if (tagDisplayStatus) { + shouldDisplay = false; + break; + } + } + } + + if (!shouldDisplay) { + dispatch(setLanguageLiteralBannerDisplayStatus(true)); + } else { + dispatch(setLanguageLiteralBannerDisplayStatus(false)); + } + }, [activeFallbackFieldsInfo]); + useEffect(() => { if (calendarId && currentCalendarData) { if (personData) { @@ -500,6 +536,35 @@ function CreateNewPerson() { + + {languageLiteralBannerDisplayStatus && ( + + + + + + { + dispatch(setLanguageLiteralBannerDisplayStatus(false)); + dispatch(setActiveFallbackFieldsInfo({})); + }} + /> + } + /> + + + + + + )} {fields?.map((section, index) => { diff --git a/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx b/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx index c9f80d5cd..befde4e3e 100644 --- a/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx +++ b/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx @@ -788,6 +788,10 @@ function CreateNewPlace() { } }, []); + useEffect(() => { + dispatch(setActiveFallbackFieldsInfo({})); + }, []); + useEffect(() => { let shouldDisplay = true; for (let key in activeFallbackFieldsInfo) { From e957ccbe74cc4278c37b26ab4521f4c04aa85175 Mon Sep 17 00:00:00 2001 From: syam babu Date: Thu, 11 Apr 2024 15:01:37 +0530 Subject: [PATCH 08/22] fix: literal fallback added to selection item component --- .../BilingualInput/bilingualInput.css | 4 + .../ContentLanguageInput.jsx | 2 + .../List/SelectionItem/SelectionItem.jsx | 15 +- .../List/SelectionItem/selectionItem.css | 8 + .../Select/selectOption.settings.js | 11 +- .../treeSelectOption.settings.js | 17 +- src/pages/Dashboard/AddEvent/AddEvent.jsx | 166 +++++++++++++++--- 7 files changed, 194 insertions(+), 29 deletions(-) diff --git a/src/components/BilingualInput/bilingualInput.css b/src/components/BilingualInput/bilingualInput.css index d0644c383..e1108bd6d 100644 --- a/src/components/BilingualInput/bilingualInput.css +++ b/src/components/BilingualInput/bilingualInput.css @@ -35,6 +35,10 @@ width: 100%; } +.bilingual-child-with-badge .ant-input-lg { + padding-right: 35px; +} + @media screen and (max-width: 480px) { .bilingual-input-tab .ant-input-lg { font-size: 12px; diff --git a/src/components/ContentLanguageInput/ContentLanguageInput.jsx b/src/components/ContentLanguageInput/ContentLanguageInput.jsx index 2c7c8e8a1..9cdbbafe4 100644 --- a/src/components/ContentLanguageInput/ContentLanguageInput.jsx +++ b/src/components/ContentLanguageInput/ContentLanguageInput.jsx @@ -72,11 +72,13 @@ function ContentLanguageInput(props) { if (innerChild?.key === contentLanguage.FRENCH && !innerChild?.props?.initialValue) { modifiedInnerChild = cloneElement(innerChild, { ...innerChild.props, + className: 'bilingual-child-with-badge', initialValue: fallbackStatus['fr']?.fallbackLiteralValue, }); } else if (innerChild?.key === contentLanguage.ENGLISH && !innerChild?.props?.initialValue) { modifiedInnerChild = cloneElement(innerChild, { ...innerChild.props, + className: 'bilingual-child-with-badge', initialValue: fallbackStatus['en']?.fallbackLiteralValue, }); } diff --git a/src/components/List/SelectionItem/SelectionItem.jsx b/src/components/List/SelectionItem/SelectionItem.jsx index 8179b94ae..144ddb923 100644 --- a/src/components/List/SelectionItem/SelectionItem.jsx +++ b/src/components/List/SelectionItem/SelectionItem.jsx @@ -9,6 +9,7 @@ import { getUserDetails } from '../../../redux/reducer/userSlice'; import ArtsDataLink from '../../Tags/ArtsDataLink/ArtsDataLink'; import SmallButton from '../../Button/SmallButton'; import ReadOnlyProtectedComponent from '../../../layout/ReadOnlyProtectedComponent'; +import LiteralBadge from '../../Badge/LiteralBadge'; function SelectionItem(props) { const { @@ -30,11 +31,15 @@ function SelectionItem(props) { onEdit, edit, creatorId, + fallbackConfig, } = props; const { t } = useTranslation(); const { user } = useSelector(getUserDetails); - // eslint-disable-next-line no-unused-vars - // const [currentCalendarData, _pageNumber, _setPageNumber, _getCalendar] = useOutletContext(); + + const promptText = + fallbackConfig?.en?.fallbackLiteralKey === '?' || fallbackConfig?.fr?.fallbackLiteralKey === '?' + ? t('common.forms.languageLiterals.unKnownLanguagePromptText') + : t('common.forms.languageLiterals.knownLanguagePromptText'); return (
{name} + {(fallbackConfig?.fr?.tagDisplayStatus || fallbackConfig?.en?.tagDisplayStatus) && ( + + )} } description={ diff --git a/src/components/List/SelectionItem/selectionItem.css b/src/components/List/SelectionItem/selectionItem.css index aa117f33a..f331add96 100644 --- a/src/components/List/SelectionItem/selectionItem.css +++ b/src/components/List/SelectionItem/selectionItem.css @@ -23,7 +23,15 @@ font-weight: 700; font-size: 16px; color: #222732; + display: flex; + gap: 8px; + align-items: center; } + +.selection-item-list-wrapper .selection-item-title .literal-badge { + position: inherit; +} + .selection-item-list-wrapper .ant-list-item-action-split { display: none; } diff --git a/src/components/Select/selectOption.settings.js b/src/components/Select/selectOption.settings.js index 46b6928e2..31c95d320 100644 --- a/src/components/Select/selectOption.settings.js +++ b/src/components/Select/selectOption.settings.js @@ -1,5 +1,6 @@ import { sourceOptions } from '../../constants/sourceOptions'; import { contentLanguageBilingual } from '../../utils/bilingual'; +import { languageFallbackSetup } from '../../utils/languageFallbackSetup'; import SelectionItem from '../List/SelectionItem'; import { EnvironmentOutlined } from '@ant-design/icons'; @@ -23,7 +24,7 @@ export const taxonomyOptions = (data, user, mappedToField, calendarContentLangua return options; }; -export const placesOptions = (data, user, calendarContentLanguage, source = sourceOptions.CMS) => { +export const placesOptions = (data, user, calendarContentLanguage, source = sourceOptions.CMS, currentCalendarData) => { let options = data?.map((place) => { return { label: ( @@ -84,6 +85,14 @@ export const placesOptions = (data, user, calendarContentLanguage, source = sour uri: place?.uri, type: place?.type, creatorId: place?.creator?.userId ?? place?.createdByUserId, + fallBackStatus: currentCalendarData + ? languageFallbackSetup({ + currentCalendarData, + fieldData: place?.name, + languageFallbacks: currentCalendarData?.languageFallbacks, + isFieldsDirty: true, + }) + : null, }; }); return options; diff --git a/src/components/TreeSelectOption/treeSelectOption.settings.js b/src/components/TreeSelectOption/treeSelectOption.settings.js index 140b84987..a34b213f9 100644 --- a/src/components/TreeSelectOption/treeSelectOption.settings.js +++ b/src/components/TreeSelectOption/treeSelectOption.settings.js @@ -4,6 +4,7 @@ import Icon, { UserOutlined } from '@ant-design/icons'; import { ReactComponent as Organizations } from '../../assets/icons/organisations.svg'; import { taxonomyClass } from '../../constants/taxonomyClass'; import { sourceOptions } from '../../constants/sourceOptions'; +import { languageFallbackSetup } from '../../utils/languageFallbackSetup'; const handleMultilevelTreeSelect = (children, user, calendarContentLanguage, parentLabel) => { return children?.map((child) => { @@ -75,7 +76,13 @@ export const treeTaxonomyOptions = (data, user, mappedToField, isDynamicField, c return options; }; -export const treeEntitiesOption = (data, user, calendarContentLanguage, source = sourceOptions.CMS) => { +export const treeEntitiesOption = ( + data, + user, + calendarContentLanguage, + source = sourceOptions.CMS, + currentCalendarData, +) => { let options = data?.map((entity) => { return { label: ( @@ -145,6 +152,14 @@ export const treeEntitiesOption = (data, user, calendarContentLanguage, source = uri: entity?.uri, source: source, creatorId: entity?.creator?.userId, + fallBackStatus: currentCalendarData + ? languageFallbackSetup({ + currentCalendarData, + fieldData: entity?.name, + languageFallbacks: currentCalendarData?.languageFallbacks, + isFieldsDirty: true, + }) + : null, }; }); return options; diff --git a/src/pages/Dashboard/AddEvent/AddEvent.jsx b/src/pages/Dashboard/AddEvent/AddEvent.jsx index c2df8ea5f..5c8a478a0 100644 --- a/src/pages/Dashboard/AddEvent/AddEvent.jsx +++ b/src/pages/Dashboard/AddEvent/AddEvent.jsx @@ -954,7 +954,9 @@ function AddEvent() { }) .unwrap() .then((response) => { - setAllPlacesList(placesOptions(response, user, calendarContentLanguage, sourceOptions.CMS)); + setAllPlacesList( + placesOptions(response, user, calendarContentLanguage, sourceOptions.CMS, currentCalendarData), + ); }) .catch((error) => console.log(error)); getExternalSource({ @@ -967,10 +969,16 @@ function AddEvent() { .unwrap() .then((response) => { setAllPlacesArtsdataList( - placesOptions(response?.artsdata, user, calendarContentLanguage, sourceOptions.ARTSDATA), + placesOptions(response?.artsdata, user, calendarContentLanguage, sourceOptions.ARTSDATA, currentCalendarData), ); setAllPlacesImportsFootlightList( - placesOptions(response?.footlight, user, calendarContentLanguage, externalSourceOptions.FOOTLIGHT), + placesOptions( + response?.footlight, + user, + calendarContentLanguage, + externalSourceOptions.FOOTLIGHT, + currentCalendarData, + ), ); }) .catch((error) => console.log(error)); @@ -988,11 +996,17 @@ function AddEvent() { .unwrap() .then((response) => { if (type == 'organizers') { - setOrganizersList(treeEntitiesOption(response, user, calendarContentLanguage, sourceOptions.CMS)); + setOrganizersList( + treeEntitiesOption(response, user, calendarContentLanguage, sourceOptions.CMS, currentCalendarData), + ); } else if (type == 'performers') { - setPerformerList(treeEntitiesOption(response, user, calendarContentLanguage, sourceOptions.CMS)); + setPerformerList( + treeEntitiesOption(response, user, calendarContentLanguage, sourceOptions.CMS, currentCalendarData), + ); } else if (type == 'supporters') { - setSupporterList(treeEntitiesOption(response, user, calendarContentLanguage, sourceOptions.CMS)); + setSupporterList( + treeEntitiesOption(response, user, calendarContentLanguage, sourceOptions.CMS, currentCalendarData), + ); } }) .catch((error) => console.log(error)); @@ -1007,24 +1021,60 @@ function AddEvent() { .then((response) => { if (type == 'organizers') { setOrganizersArtsdataList( - treeEntitiesOption(response?.artsdata, user, calendarContentLanguage, sourceOptions.ARTSDATA), + treeEntitiesOption( + response?.artsdata, + user, + calendarContentLanguage, + sourceOptions.ARTSDATA, + currentCalendarData, + ), ); setOrganizersImportsFootlightList( - treeEntitiesOption(response?.footlight, user, calendarContentLanguage, externalSourceOptions.FOOTLIGHT), + treeEntitiesOption( + response?.footlight, + user, + calendarContentLanguage, + externalSourceOptions.FOOTLIGHT, + currentCalendarData, + ), ); } else if (type == 'performers') { setPerformerArtsdataList( - treeEntitiesOption(response?.artsdata, user, calendarContentLanguage, sourceOptions.ARTSDATA), + treeEntitiesOption( + response?.artsdata, + user, + calendarContentLanguage, + sourceOptions.ARTSDATA, + currentCalendarData, + ), ); setPerformerImportsFootlightList( - treeEntitiesOption(response?.footlight, user, calendarContentLanguage, externalSourceOptions.FOOTLIGHT), + treeEntitiesOption( + response?.footlight, + user, + calendarContentLanguage, + externalSourceOptions.FOOTLIGHT, + currentCalendarData, + ), ); } else if (type == 'supporters') { setSupporterArtsdataList( - treeEntitiesOption(response?.artsdata, user, calendarContentLanguage, sourceOptions.ARTSDATA), + treeEntitiesOption( + response?.artsdata, + user, + calendarContentLanguage, + sourceOptions.ARTSDATA, + currentCalendarData, + ), ); setSupporterImportsFootlightList( - treeEntitiesOption(response?.footlight, user, calendarContentLanguage, externalSourceOptions.FOOTLIGHT), + treeEntitiesOption( + response?.footlight, + user, + calendarContentLanguage, + externalSourceOptions.FOOTLIGHT, + currentCalendarData, + ), ); } }) @@ -1233,7 +1283,15 @@ function AddEvent() { ...initialPlace[0], ['accessibility']: initialPlaceAccessibiltiy, }; - setLocationPlace(placesOptions(initialPlace, user, calendarContentLanguage)[0], sourceOptions.CMS); + setLocationPlace( + placesOptions( + initialPlace, + user, + calendarContentLanguage, + sourceOptions.CMS, + currentCalendarData, + )[0], + ); } }); } else { @@ -1241,7 +1299,9 @@ function AddEvent() { ...initialPlace[0], ['accessibility']: [], }; - setLocationPlace(placesOptions(initialPlace, user, calendarContentLanguage)[0], sourceOptions.CMS); + setLocationPlace( + placesOptions(initialPlace, user, calendarContentLanguage, sourceOptions.CMS, currentCalendarData)[0], + ); } res?.data?.map((taxonomy) => { if (taxonomy?.mappedToField == 'Region') { @@ -1249,8 +1309,13 @@ function AddEvent() { if (initialPlace[0]?.regions[0]?.entityId == t?.id) { initialPlace[0] = { ...initialPlace[0], regions: [t] }; setLocationPlace( - placesOptions(initialPlace, user, calendarContentLanguage)[0], - sourceOptions.CMS, + placesOptions( + initialPlace, + user, + calendarContentLanguage, + sourceOptions.CMS, + currentCalendarData, + )[0], ); } }); @@ -1283,7 +1348,13 @@ function AddEvent() { }; }); setSelectedOrganizers( - treeEntitiesOption(initialOrganizers, user, calendarContentLanguage, sourceOptions.CMS), + treeEntitiesOption( + initialOrganizers, + user, + calendarContentLanguage, + sourceOptions.CMS, + currentCalendarData, + ), ); } if (eventData?.performer) { @@ -1299,7 +1370,13 @@ function AddEvent() { }; }); setSelectedPerformers( - treeEntitiesOption(initialPerformers, user, calendarContentLanguage, sourceOptions.CMS), + treeEntitiesOption( + initialPerformers, + user, + calendarContentLanguage, + sourceOptions.CMS, + currentCalendarData, + ), ); initialAddedFields = initialAddedFields?.concat(otherInformationFieldNames?.performerWrap); } @@ -1316,7 +1393,13 @@ function AddEvent() { }; }); setSelectedSupporters( - treeEntitiesOption(initialSupporters, user, calendarContentLanguage, sourceOptions.CMS), + treeEntitiesOption( + initialSupporters, + user, + calendarContentLanguage, + sourceOptions.CMS, + currentCalendarData, + ), ); initialAddedFields = initialAddedFields?.concat(otherInformationFieldNames?.supporterWrap); } @@ -1488,17 +1571,41 @@ function AddEvent() { useEffect(() => { if (initialEntities && currentCalendarData && !initialExternalSourceLoading) { - setOrganizersList(treeEntitiesOption(initialEntities, user, calendarContentLanguage, sourceOptions.CMS)); - setPerformerList(treeEntitiesOption(initialEntities, user, calendarContentLanguage, sourceOptions.CMS)); - setSupporterList(treeEntitiesOption(initialEntities, user, calendarContentLanguage, sourceOptions.CMS)); + setOrganizersList( + treeEntitiesOption(initialEntities, user, calendarContentLanguage, sourceOptions.CMS, currentCalendarData), + ); + setPerformerList( + treeEntitiesOption(initialEntities, user, calendarContentLanguage, sourceOptions.CMS, currentCalendarData), + ); + setSupporterList( + treeEntitiesOption(initialEntities, user, calendarContentLanguage, sourceOptions.CMS, currentCalendarData), + ); setPerformerArtsdataList( - treeEntitiesOption(initialExternalSource?.artsdata, user, calendarContentLanguage, sourceOptions.ARTSDATA), + treeEntitiesOption( + initialExternalSource?.artsdata, + user, + calendarContentLanguage, + sourceOptions.ARTSDATA, + currentCalendarData, + ), ); setSupporterArtsdataList( - treeEntitiesOption(initialExternalSource?.artsdata, user, calendarContentLanguage, sourceOptions.ARTSDATA), + treeEntitiesOption( + initialExternalSource?.artsdata, + user, + calendarContentLanguage, + sourceOptions.ARTSDATA, + currentCalendarData, + ), ); setOrganizersArtsdataList( - treeEntitiesOption(initialExternalSource?.artsdata, user, calendarContentLanguage, sourceOptions.ARTSDATA), + treeEntitiesOption( + initialExternalSource?.artsdata, + user, + calendarContentLanguage, + sourceOptions.ARTSDATA, + currentCalendarData, + ), ); setOrganizersImportsFootlightList( treeEntitiesOption( @@ -1506,6 +1613,7 @@ function AddEvent() { user, calendarContentLanguage, externalSourceOptions.FOOTLIGHT, + currentCalendarData, ), ); setPerformerImportsFootlightList( @@ -1514,6 +1622,7 @@ function AddEvent() { user, calendarContentLanguage, externalSourceOptions.FOOTLIGHT, + currentCalendarData, ), ); setSupporterImportsFootlightList( @@ -1522,6 +1631,7 @@ function AddEvent() { user, calendarContentLanguage, externalSourceOptions.FOOTLIGHT, + currentCalendarData, ), ); placesSearch(''); @@ -2388,6 +2498,7 @@ function AddEvent() { {locationPlace && ( ); })} @@ -3386,6 +3498,7 @@ function AddEvent() { organizerPerformerSupporterPlaceNavigationHandler(performer?.value, performer?.type, e) } creatorId={performer?.creatorId} + fallbackConfig={performer?.fallBackStatus} /> ); })} @@ -3602,6 +3715,7 @@ function AddEvent() { organizerPerformerSupporterPlaceNavigationHandler(supporter?.value, supporter?.type, e) } creatorId={supporter?.creatorId} + fallbackConfig={supporter?.fallBackStatus} /> ); })} @@ -4206,6 +4320,7 @@ function AddEvent() { add={add} remove={remove} fields={fields} + form={form} firstFieldName={'price'} secondFieldName={'name'} thirdFieldName={'fr'} @@ -4241,6 +4356,7 @@ function AddEvent() { add={add} remove={remove} fields={fields} + form={form} firstFieldName={'price'} secondFieldName={'name'} thirdFieldName={'en'} From d32ace1144c8d53947748663068fa31406f57316 Mon Sep 17 00:00:00 2001 From: syam babu Date: Thu, 11 Apr 2024 16:48:15 +0530 Subject: [PATCH 09/22] fix: fixed edge case. closes #805 --- src/pages/Dashboard/AddEvent/AddEvent.jsx | 25 ++++++++++++----------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/src/pages/Dashboard/AddEvent/AddEvent.jsx b/src/pages/Dashboard/AddEvent/AddEvent.jsx index 5c8a478a0..6e837672f 100644 --- a/src/pages/Dashboard/AddEvent/AddEvent.jsx +++ b/src/pages/Dashboard/AddEvent/AddEvent.jsx @@ -360,6 +360,7 @@ function AddEvent() { dynamicFields = [], recurringEvent, description = {}, + name = {}, inLanguage = []; let eventObj; @@ -473,11 +474,12 @@ function AddEvent() { values?.contactEmail || values?.contactPhoneNumber ) { + const name = {}; + if (values?.englishContactTitle?.trim() !== '') name['en'] = values?.englishContactTitle?.trim(); + if (values?.frenchContactTitle?.trim() !== '') name['fr'] = values?.frenchContactTitle?.trim(); + contactPoint = { - name: { - en: values?.englishContactTitle?.trim(), - fr: values?.frenchContactTitle?.trim(), - }, + name, url: { uri: urlProtocolCheck(values?.contactWebsiteUrl), }, @@ -505,13 +507,13 @@ function AddEvent() { } if (ticketType) { + const name = {}; + if (values?.englishTicketNote?.trim() !== '') name['en'] = values?.englishTicketNote?.trim(); + if (values?.frenchTicketNote?.trim() !== '') name['fr'] = values?.frenchTicketNote?.trim(); offerConfiguration = { category: ticketType, ...((values?.englishTicketNote || values?.frenchTicketNote) && { - name: { - en: values?.englishTicketNote?.trim(), - fr: values?.frenchTicketNote?.trim(), - }, + name, }), ...(ticketType === offerTypes.PAYING && values?.prices?.length > 0 && @@ -609,11 +611,10 @@ function AddEvent() { en: values?.englishEditor, }; + if (values?.english?.trim() !== '') name['en'] = values?.english?.trim(); + if (values?.french?.trim() !== '') name['fr'] = values?.french?.trim(); eventObj = { - name: { - en: values?.english?.trim(), - fr: values?.french?.trim(), - }, + name, ...(values?.startTime && { startDateTime }), ...(!values?.startTime && { startDate: startDateTime }), ...(values?.endTime && { endDateTime }), From 45aa1cbc64184fb9661524c2b5630caa496aa4ea Mon Sep 17 00:00:00 2001 From: syam babu Date: Fri, 12 Apr 2024 15:14:45 +0530 Subject: [PATCH 10/22] fix: fixed filtering of language fallbacks --- src/utils/languageFallbackSetup.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/utils/languageFallbackSetup.js b/src/utils/languageFallbackSetup.js index 0f296a40e..6e73d28b6 100644 --- a/src/utils/languageFallbackSetup.js +++ b/src/utils/languageFallbackSetup.js @@ -2,11 +2,12 @@ export function languageFallbackSetup({ currentCalendarData, fieldData, language let results = {}; if (!fieldData || Object.keys(languageFallbacks).length == 0) return results; - const fallbackLiteralKeys = Object.keys(languageFallbacks); + const fallbackLiteralKeysEn = languageFallbacks?.en; + const fallbackLiteralKeysFr = languageFallbacks?.fr; if (currentCalendarData.contentLanguage === 'BILINGUAL') { if (!Object.hasOwnProperty.call(fieldData, 'en')) { - const fallbackInfo = fallbackLiteralKeys.find((key) => Object.hasOwnProperty.call(fieldData, key)); + const fallbackInfo = fallbackLiteralKeysEn?.find((key) => Object.hasOwnProperty.call(fieldData, key)); const fallbackErrorHandled = fallbackInfo ? { key: fallbackInfo, value: fieldData[fallbackInfo] } : Object.keys(fieldData).length > 0 @@ -21,7 +22,7 @@ export function languageFallbackSetup({ currentCalendarData, fieldData, language } if (!Object.hasOwnProperty.call(fieldData, 'fr')) { - const fallbackInfo = fallbackLiteralKeys.find((key) => Object.hasOwnProperty.call(fieldData, key)); + const fallbackInfo = fallbackLiteralKeysFr?.find((key) => Object.hasOwnProperty.call(fieldData, key)); const fallbackErrorHandled = fallbackInfo ? { key: fallbackInfo, value: fieldData[fallbackInfo] } : Object.keys(fieldData).length > 0 @@ -36,7 +37,7 @@ export function languageFallbackSetup({ currentCalendarData, fieldData, language } } else if (currentCalendarData.contentLanguage === 'FRENCH') { if (!Object.hasOwnProperty.call(fieldData, 'fr')) { - const fallbackInfo = fallbackLiteralKeys.find((key) => Object.hasOwnProperty.call(fieldData, key)); + const fallbackInfo = fallbackLiteralKeysFr?.find((key) => Object.hasOwnProperty.call(fieldData, key)); const fallbackErrorHandled = fallbackInfo ? { key: fallbackInfo, value: fieldData[fallbackInfo] } : Object.keys(fieldData).length > 0 @@ -49,7 +50,8 @@ export function languageFallbackSetup({ currentCalendarData, fieldData, language fallbackLiteralValue: fallbackErrorHandled?.value, }; } else { - const fallbackInfo = fallbackLiteralKeys.find((key) => Object.hasOwnProperty.call(fieldData, key)); + const fallbackInfo = fallbackLiteralKeysEn?.find((key) => Object.hasOwnProperty.call(fieldData, key)); + const fallbackErrorHandled = fallbackInfo ? { key: fallbackInfo, value: fieldData[fallbackInfo] } : Object.keys(fieldData).length > 0 @@ -64,7 +66,7 @@ export function languageFallbackSetup({ currentCalendarData, fieldData, language } } else { if (!Object.hasOwnProperty.call(fieldData, 'en')) { - const fallbackInfo = fallbackLiteralKeys.find((key) => Object.hasOwnProperty.call(fieldData, key)); + const fallbackInfo = fallbackLiteralKeysEn?.find((key) => Object.hasOwnProperty.call(fieldData, key)); const fallbackErrorHandled = fallbackInfo ? { key: fallbackInfo, value: fieldData[fallbackInfo] } : Object.keys(fieldData).length > 0 From 3b372376476086d560ce59cc62eca8fcb2c87505 Mon Sep 17 00:00:00 2001 From: syam babu Date: Mon, 15 Apr 2024 13:52:01 +0530 Subject: [PATCH 11/22] fix: fixed typo in CreateNewPlace --- .../Dashboard/CreateNewPlace/CreateNewPlace.jsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx b/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx index befde4e3e..6d8f89f3c 100644 --- a/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx +++ b/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx @@ -1176,7 +1176,7 @@ function CreateNewPlace() { @@ -1342,7 +1342,7 @@ function CreateNewPlace() { label={t('dashboard.places.createNew.addPlace.disambiguatingDescription.disambiguatingDescription')}> @@ -1428,7 +1428,7 @@ function CreateNewPlace() { data-cy="form-item-place-description-title"> @@ -1681,7 +1681,7 @@ function CreateNewPlace() { data-cy="form-item-street-address-title"> @@ -1789,7 +1789,7 @@ function CreateNewPlace() { data-cy="form-item-place-city-title"> @@ -1897,7 +1897,7 @@ function CreateNewPlace() { data-cy="form-item-province-title"> @@ -1983,7 +1983,7 @@ function CreateNewPlace() { data-cy="form-item-country-title"> @@ -2656,7 +2656,7 @@ function CreateNewPlace() { }}> From 8d2a13947feee6a5ac4584355bbba164a411055f Mon Sep 17 00:00:00 2001 From: syam babu Date: Mon, 22 Apr 2024 17:45:18 +0530 Subject: [PATCH 12/22] fix: save as draft changed to remove unedited fallback values --- .../ContentLanguageInput.jsx | 86 +-------------- .../useModifyChildernWithFallbackLanguage.js | 92 ++++++++++++++++ src/pages/Dashboard/AddEvent/AddEvent.jsx | 104 +++++++++++++++--- .../CreateNewOrganization.jsx | 3 +- .../CreateNewPerson/CreateNewPerson.jsx | 3 +- .../CreateNewPlace/CreateNewPlace.jsx | 3 +- src/redux/reducer/languageLiteralSlice.js | 8 +- src/utils/removeUneditedFallbackValues.js | 11 ++ 8 files changed, 207 insertions(+), 103 deletions(-) create mode 100644 src/hooks/useModifyChildernWithFallbackLanguage.js create mode 100644 src/utils/removeUneditedFallbackValues.js diff --git a/src/components/ContentLanguageInput/ContentLanguageInput.jsx b/src/components/ContentLanguageInput/ContentLanguageInput.jsx index 9cdbbafe4..34918a097 100644 --- a/src/components/ContentLanguageInput/ContentLanguageInput.jsx +++ b/src/components/ContentLanguageInput/ContentLanguageInput.jsx @@ -1,94 +1,18 @@ -import React, { useEffect, cloneElement, useState, useMemo } from 'react'; +import React from 'react'; import { useOutletContext } from 'react-router-dom'; import { contentLanguage } from '../../constants/contentLanguage'; -import { languageFallbackSetup } from '../../utils/languageFallbackSetup'; import LiteralBadge from '../Badge/LiteralBadge'; import { useTranslation } from 'react-i18next'; -import { useDispatch, useSelector } from 'react-redux'; -import { getActiveFallbackFieldsInfo, setActiveFallbackFieldsInfo } from '../../redux/reducer/languageLiteralSlice'; +import useModifyChildernWithFallbackLanguage from '../../hooks/useModifyChildernWithFallbackLanguage'; function ContentLanguageInput(props) { - const { children, calendarContentLanguage, isFieldsDirty } = props; + const { children, calendarContentLanguage } = props; const { t } = useTranslation(); - const dispatch = useDispatch(); - const activeFallbackFieldsInfo = useSelector(getActiveFallbackFieldsInfo); // eslint-disable-next-line no-unused-vars const [currentCalendarData, _pageNumber, _setPageNumber, _getCalendar] = useOutletContext(); - const [fallbackStatus, setFallbackStatus] = useState(null); - - useEffect(() => { - const combinedName = children?.props?.children - ?.map((child) => { - if (child?.props?.name) return child?.props?.name; - if (child?.props?.formName) return child?.props?.formName; - else return ''; - }) - .join(''); - - const modifiedActiveFallbackFieldsInfo = { - ...activeFallbackFieldsInfo, - [combinedName]: fallbackStatus, - }; - - if (fallbackStatus?.fr?.tagDisplayStatus || fallbackStatus?.en?.tagDisplayStatus) { - dispatch(setActiveFallbackFieldsInfo(modifiedActiveFallbackFieldsInfo)); - } else if (isFieldsDirty?.en || isFieldsDirty?.fr) { - // eslint-disable-next-line no-unused-vars - const { [combinedName]: _, ...rest } = activeFallbackFieldsInfo; - dispatch(setActiveFallbackFieldsInfo(rest)); - } - }, [fallbackStatus]); - - useEffect(() => { - if (!currentCalendarData) return; - - const status = languageFallbackSetup({ - currentCalendarData, - fieldData: children?.props?.fieldData, - languageFallbacks: currentCalendarData.languageFallbacks, - isFieldsDirty: isFieldsDirty, - }); - - // Only update fallbackStatus if it has actually changed - if (JSON.stringify(status) !== JSON.stringify(fallbackStatus)) { - setFallbackStatus(status); - } - }, [currentCalendarData, children, props.isFieldsDirty]); - - const modifiedChildren = useMemo(() => { - if (!children || !fallbackStatus) return children; - - return React.Children.map(children, (child) => { - let modifiedChild = child; - - if (child && child.props && child.props.children) { - modifiedChild = cloneElement(child, { - ...child.props, - fallbackStatus: fallbackStatus, - children: React.Children.map(child.props.children, (innerChild) => { - let modifiedInnerChild = innerChild; - if (innerChild?.key === contentLanguage.FRENCH && !innerChild?.props?.initialValue) { - modifiedInnerChild = cloneElement(innerChild, { - ...innerChild.props, - className: 'bilingual-child-with-badge', - initialValue: fallbackStatus['fr']?.fallbackLiteralValue, - }); - } else if (innerChild?.key === contentLanguage.ENGLISH && !innerChild?.props?.initialValue) { - modifiedInnerChild = cloneElement(innerChild, { - ...innerChild.props, - className: 'bilingual-child-with-badge', - initialValue: fallbackStatus['en']?.fallbackLiteralValue, - }); - } - return modifiedInnerChild; - }), - }); - } - return modifiedChild; - }); - }, [children, fallbackStatus]); + const { fallbackStatus, modifiedChildren } = useModifyChildernWithFallbackLanguage(props, currentCalendarData); if (!modifiedChildren) return children; @@ -110,7 +34,7 @@ function ContentLanguageInput(props) { ); } else if (calendarContentLanguage === contentLanguage.ENGLISH) { const promptText = - fallbackStatus?.fr?.fallbackLiteralKey === '?' + fallbackStatus?.en?.fallbackLiteralKey === '?' ? t('common.forms.languageLiterals.unKnownLanguagePromptText') : t('common.forms.languageLiterals.knownLanguagePromptText'); return ( diff --git a/src/hooks/useModifyChildernWithFallbackLanguage.js b/src/hooks/useModifyChildernWithFallbackLanguage.js new file mode 100644 index 000000000..775d32843 --- /dev/null +++ b/src/hooks/useModifyChildernWithFallbackLanguage.js @@ -0,0 +1,92 @@ +import React, { cloneElement, useEffect, useMemo, useState } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { languageFallbackSetup } from '../utils/languageFallbackSetup'; +import { getActiveFallbackFieldsInfo, setActiveFallbackFieldsInfo } from '../redux/reducer/languageLiteralSlice'; +import { contentLanguage } from '../constants/contentLanguage'; + +function useModifyChildernWithFallbackLanguage(props, currentCalendarData) { + const { children, isFieldsDirty } = props; + const dispatch = useDispatch(); + const activeFallbackFieldsInfo = useSelector(getActiveFallbackFieldsInfo); + + const [fallbackStatus, setFallbackStatus] = useState(null); + + useEffect(() => { + if (!currentCalendarData) return; + + const status = languageFallbackSetup({ + currentCalendarData, + fieldData: children?.props?.fieldData, + languageFallbacks: currentCalendarData.languageFallbacks, + isFieldsDirty: isFieldsDirty, + }); + + // Only update fallbackStatus if it has actually changed + if (JSON.stringify(status) !== JSON.stringify(fallbackStatus)) { + setFallbackStatus(status); + } + }, [children, isFieldsDirty]); + + useEffect(() => { + const combinedName = children?.props?.children + ?.map((child) => { + if (child?.props?.name) return child?.props?.name; + if (child?.props?.formName) return child?.props?.formName; + else return ''; + }) + .join('-'); + + const modifiedActiveFallbackFieldsInfo = { + ...activeFallbackFieldsInfo, + [combinedName]: fallbackStatus, + }; + + if (fallbackStatus?.fr?.tagDisplayStatus || fallbackStatus?.en?.tagDisplayStatus) { + dispatch(setActiveFallbackFieldsInfo(modifiedActiveFallbackFieldsInfo)); + } else if (isFieldsDirty?.en || isFieldsDirty?.fr) { + // eslint-disable-next-line no-unused-vars + const { [combinedName]: _, ...rest } = activeFallbackFieldsInfo; + dispatch(setActiveFallbackFieldsInfo(rest)); + } + }, [fallbackStatus]); + + const modifiedChildren = useMemo(() => { + if (!children || !fallbackStatus) return children; + + return React.Children.map(children, (child) => { + let modifiedChild = child; + + if (child && child.props && child.props.children) { + modifiedChild = cloneElement(child, { + ...child.props, + fallbackStatus: fallbackStatus, + children: React.Children.map(child.props.children, (innerChild) => { + let modifiedInnerChild = innerChild; + if (innerChild?.key === contentLanguage.FRENCH && !innerChild?.props?.initialValue) { + modifiedInnerChild = cloneElement(innerChild, { + ...innerChild.props, + className: 'bilingual-child-with-badge', + initialValue: fallbackStatus['fr']?.fallbackLiteralValue, + }); + } else if (innerChild?.key === contentLanguage.ENGLISH && !innerChild?.props?.initialValue) { + modifiedInnerChild = cloneElement(innerChild, { + ...innerChild.props, + className: 'bilingual-child-with-badge', + initialValue: fallbackStatus['en']?.fallbackLiteralValue, + }); + } + return modifiedInnerChild; + }), + }); + } + return modifiedChild; + }); + }, [children, fallbackStatus]); + + return { + fallbackStatus, + modifiedChildren, + }; +} + +export default useModifyChildernWithFallbackLanguage; diff --git a/src/pages/Dashboard/AddEvent/AddEvent.jsx b/src/pages/Dashboard/AddEvent/AddEvent.jsx index 6e837672f..c86afc098 100644 --- a/src/pages/Dashboard/AddEvent/AddEvent.jsx +++ b/src/pages/Dashboard/AddEvent/AddEvent.jsx @@ -96,11 +96,13 @@ import ChangeTypeLayout from '../../../layout/ChangeTypeLayout/ChangeTypeLayout' import { getEmbedUrl, validateVimeoURL, validateYouTubeURL } from '../../../utils/getEmbedVideoUrl'; import { sameAsTypes } from '../../../constants/sameAsTypes'; import { + clearActiveFallbackFieldsInfo, getActiveFallbackFieldsInfo, getLanguageLiteralBannerDisplayStatus, setActiveFallbackFieldsInfo, setLanguageLiteralBannerDisplayStatus, } from '../../../redux/reducer/languageLiteralSlice'; +import { removeUneditedFallbackValues } from '../../../utils/removeUneditedFallbackValues'; const { TextArea } = Input; @@ -452,13 +454,28 @@ function AddEvent() { }; } if (values?.frenchVirtualLocation || values?.englishVirtualLocation || values?.virtualLocationOnlineLink) { + const englishVirtualLocation = removeUneditedFallbackValues({ + values: values?.englishVirtualLocation?.trim(), + activeFallbackFieldsInfo, + fieldName: 'frenchVirtualLocation-englishVirtualLocation', + property: 'en', + }); + const frenchVirtualLocation = removeUneditedFallbackValues({ + values: values?.frenchVirtualLocation?.trim(), + activeFallbackFieldsInfo, + fieldName: 'frenchVirtualLocation-englishVirtualLocation', + property: 'fr', + }); + + const name = {}; + + if (frenchVirtualLocation) name['fr'] = frenchVirtualLocation; + if (englishVirtualLocation) name['en'] = englishVirtualLocation; + locationId = { ...locationId, virtualLocation: { - name: { - en: values?.englishVirtualLocation?.trim(), - fr: values?.frenchVirtualLocation?.trim(), - }, + name, description: {}, dynamicFields: [], url: { @@ -475,8 +492,20 @@ function AddEvent() { values?.contactPhoneNumber ) { const name = {}; - if (values?.englishContactTitle?.trim() !== '') name['en'] = values?.englishContactTitle?.trim(); - if (values?.frenchContactTitle?.trim() !== '') name['fr'] = values?.frenchContactTitle?.trim(); + const englishContactTitle = removeUneditedFallbackValues({ + values: values?.englishContactTitle?.trim(), + activeFallbackFieldsInfo, + fieldName: 'frenchContactTitle-englishContactTitle', + property: 'en', + }); + const frenchContactTitle = removeUneditedFallbackValues({ + values: values?.frenchContactTitle?.trim(), + activeFallbackFieldsInfo, + fieldName: 'frenchContactTitle-englishContactTitle', + property: 'fr', + }); + if (frenchContactTitle) name['en'] = frenchContactTitle; + if (englishContactTitle) name['fr'] = englishContactTitle; contactPoint = { name, @@ -508,8 +537,22 @@ function AddEvent() { if (ticketType) { const name = {}; - if (values?.englishTicketNote?.trim() !== '') name['en'] = values?.englishTicketNote?.trim(); - if (values?.frenchTicketNote?.trim() !== '') name['fr'] = values?.frenchTicketNote?.trim(); + const englishTicketNote = removeUneditedFallbackValues({ + values: values?.englishTicketNote?.trim() !== '', + activeFallbackFieldsInfo, + fieldName: 'frenchTicketNote-englishTicketNote', + property: 'en', + }); + const frenchTicketNote = removeUneditedFallbackValues({ + values: values?.frenchTicketNote?.trim(), + activeFallbackFieldsInfo, + fieldName: 'frenchTicketNote-englishTicketNote', + property: 'fr', + }); + + if (englishTicketNote) name['en'] = englishTicketNote; + if (frenchTicketNote) name['fr'] = frenchTicketNote; + offerConfiguration = { category: ticketType, ...((values?.englishTicketNote || values?.frenchTicketNote) && { @@ -601,20 +644,47 @@ function AddEvent() { }); } - if (values?.frenchEditor) + const descriptionFr = removeUneditedFallbackValues({ + values: values?.frenchEditor?.trim(), + activeFallbackFieldsInfo, + fieldName: 'frenchEditor-englishEditor', + property: 'fr', + }); + const descriptionEn = removeUneditedFallbackValues({ + values: values?.englishEditor?.trim(), + activeFallbackFieldsInfo, + fieldName: 'frenchEditor-englishEditor', + property: 'en', + }); + + if (descriptionFr) description = { - fr: values?.frenchEditor, + fr: descriptionFr, }; - if (values?.englishEditor) + if (descriptionEn) description = { ...description, - en: values?.englishEditor, + en: descriptionEn, }; - if (values?.english?.trim() !== '') name['en'] = values?.english?.trim(); - if (values?.french?.trim() !== '') name['fr'] = values?.french?.trim(); + const nameFr = removeUneditedFallbackValues({ + values: values?.french?.trim(), + activeFallbackFieldsInfo, + fieldName: 'french-english', + property: 'fr', + }); + const nameEn = removeUneditedFallbackValues({ + values: values?.english?.trim(), + activeFallbackFieldsInfo, + fieldName: 'french-english', + property: 'en', + }); + + if (nameEn) name['en'] = nameEn; + if (nameFr) name['fr'] = nameFr; + eventObj = { - name, + name: { ...name, ...eventData?.name }, ...(values?.startTime && { startDateTime }), ...(!values?.startTime && { startDate: startDateTime }), ...(values?.endTime && { endDateTime }), @@ -1718,12 +1788,12 @@ function AddEvent() { showIcon={false} action={ { dispatch(setLanguageLiteralBannerDisplayStatus(false)); - dispatch(setActiveFallbackFieldsInfo({})); + dispatch(clearActiveFallbackFieldsInfo({})); }} /> } diff --git a/src/pages/Dashboard/CreateNewOrganization/CreateNewOrganization.jsx b/src/pages/Dashboard/CreateNewOrganization/CreateNewOrganization.jsx index 5a0d79325..612b6579c 100644 --- a/src/pages/Dashboard/CreateNewOrganization/CreateNewOrganization.jsx +++ b/src/pages/Dashboard/CreateNewOrganization/CreateNewOrganization.jsx @@ -65,6 +65,7 @@ import ChangeTypeLayout from '../../../layout/ChangeTypeLayout/ChangeTypeLayout' import SelectionItem from '../../../components/List/SelectionItem'; import moment from 'moment'; import { + clearActiveFallbackFieldsInfo, getActiveFallbackFieldsInfo, getLanguageLiteralBannerDisplayStatus, setActiveFallbackFieldsInfo, @@ -945,7 +946,7 @@ function CreateNewOrganization() { label={t('common.dismiss')} onClick={() => { dispatch(setLanguageLiteralBannerDisplayStatus(false)); - dispatch(setActiveFallbackFieldsInfo({})); + dispatch(clearActiveFallbackFieldsInfo({})); }} /> } diff --git a/src/pages/Dashboard/CreateNewPerson/CreateNewPerson.jsx b/src/pages/Dashboard/CreateNewPerson/CreateNewPerson.jsx index b8a2af278..5c9c642fa 100644 --- a/src/pages/Dashboard/CreateNewPerson/CreateNewPerson.jsx +++ b/src/pages/Dashboard/CreateNewPerson/CreateNewPerson.jsx @@ -45,6 +45,7 @@ import { sameAsTypes } from '../../../constants/sameAsTypes'; import SelectionItem from '../../../components/List/SelectionItem'; import moment from 'moment'; import { + clearActiveFallbackFieldsInfo, getActiveFallbackFieldsInfo, getLanguageLiteralBannerDisplayStatus, setActiveFallbackFieldsInfo, @@ -554,7 +555,7 @@ function CreateNewPerson() { label={t('common.dismiss')} onClick={() => { dispatch(setLanguageLiteralBannerDisplayStatus(false)); - dispatch(setActiveFallbackFieldsInfo({})); + dispatch(clearActiveFallbackFieldsInfo({})); }} /> } diff --git a/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx b/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx index 6d8f89f3c..f99946b69 100644 --- a/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx +++ b/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx @@ -84,6 +84,7 @@ import { sameAsTypes } from '../../../constants/sameAsTypes'; import ChangeTypeLayout from '../../../layout/ChangeTypeLayout/ChangeTypeLayout'; import moment from 'moment'; import { + clearActiveFallbackFieldsInfo, getActiveFallbackFieldsInfo, getLanguageLiteralBannerDisplayStatus, setActiveFallbackFieldsInfo, @@ -1103,7 +1104,7 @@ function CreateNewPlace() { label={t('common.dismiss')} onClick={() => { dispatch(setLanguageLiteralBannerDisplayStatus(false)); - dispatch(setActiveFallbackFieldsInfo({})); + dispatch(clearActiveFallbackFieldsInfo({})); }} /> } diff --git a/src/redux/reducer/languageLiteralSlice.js b/src/redux/reducer/languageLiteralSlice.js index 779e992ba..15889a2e0 100644 --- a/src/redux/reducer/languageLiteralSlice.js +++ b/src/redux/reducer/languageLiteralSlice.js @@ -13,12 +13,16 @@ export const languageLiteralSlice = createSlice({ state.status = action.payload; }, setActiveFallbackFieldsInfo: (state, action) => { - state.activeFallbackFieldsInfo = action.payload; + state.activeFallbackFieldsInfo = { ...state.activeFallbackFieldsInfo, ...action.payload }; + }, + clearActiveFallbackFieldsInfo: (state) => { + state.activeFallbackFieldsInfo = {}; }, }, }); -export const { setLanguageLiteralBannerDisplayStatus, setActiveFallbackFieldsInfo } = languageLiteralSlice.actions; +export const { setLanguageLiteralBannerDisplayStatus, setActiveFallbackFieldsInfo, clearActiveFallbackFieldsInfo } = + languageLiteralSlice.actions; export const getLanguageLiteralBannerDisplayStatus = (state) => state?.languageLiteral?.status; export const getActiveFallbackFieldsInfo = (state) => state?.languageLiteral?.activeFallbackFieldsInfo; diff --git a/src/utils/removeUneditedFallbackValues.js b/src/utils/removeUneditedFallbackValues.js new file mode 100644 index 000000000..6308f900b --- /dev/null +++ b/src/utils/removeUneditedFallbackValues.js @@ -0,0 +1,11 @@ +export const removeUneditedFallbackValues = ({ values, activeFallbackFieldsInfo, fieldName, property }) => { + if (values == '' || !values) { + return; + } + if (!Object.prototype.hasOwnProperty.call(activeFallbackFieldsInfo, fieldName)) { + return values; + } + if (activeFallbackFieldsInfo[fieldName][property]?.tagDisplayStatus) { + return; + } else return values; +}; From 895a32482fb35720970a4db955555e6eefa0512b Mon Sep 17 00:00:00 2001 From: syam babu Date: Mon, 22 Apr 2024 20:05:04 +0530 Subject: [PATCH 13/22] fix: fixed publishing with language fallback values. added confirm popup --- src/components/Modal/Confirm/Confirm.jsx | 10 +- src/locales/en/translationEn.json | 6 + src/locales/fr/transalationFr.json | 6 + src/pages/Dashboard/AddEvent/AddEvent.jsx | 255 ++++++++++-------- src/pages/Dashboard/AddEvent/addEvent.css | 13 + .../CreateNewOrganization.jsx | 3 +- .../CreateNewPerson/CreateNewPerson.jsx | 3 +- .../CreateNewPlace/CreateNewPlace.jsx | 3 +- 8 files changed, 176 insertions(+), 123 deletions(-) diff --git a/src/components/Modal/Confirm/Confirm.jsx b/src/components/Modal/Confirm/Confirm.jsx index 5bbeba59a..75f6d3e4b 100644 --- a/src/components/Modal/Confirm/Confirm.jsx +++ b/src/components/Modal/Confirm/Confirm.jsx @@ -2,9 +2,15 @@ import { Modal } from 'antd'; import { ExclamationCircleOutlined } from '@ant-design/icons'; import './confirm.css'; -export const Confirm = ({ title, content, onAction, okText, cancelText }) => { +export const Confirm = ({ title, content, onAction, okText, cancelText, className }) => { const { confirm } = Modal; + let modalClassName = ['global-delete-modal-container']; + if (className) { + modalClassName.push(className); + modalClassName = modalClassName.join(' '); + } + return confirm({ title: ( <> @@ -22,7 +28,7 @@ export const Confirm = ({ title, content, onAction, okText, cancelText }) => { okText: okText, cancelText: cancelText, centered: true, - className: 'global-delete-modal-container', + className: modalClassName, closable: true, header: null, onOk() { diff --git a/src/locales/en/translationEn.json b/src/locales/en/translationEn.json index 5c87374a1..3c95a57cf 100644 --- a/src/locales/en/translationEn.json +++ b/src/locales/en/translationEn.json @@ -130,6 +130,12 @@ "addMoreDetails": "Add more details to your event", "allDone": "All done", "featuredEvent": "Featured event", + "fallbackConfirm": { + "contentPart1": "You haven’t updated all the text that doesn’t match the language(s) on your website.", + "contentPart2": "Do you want to publish as is?", + "title": "Publish event", + "publish": "Publish" + }, "language": { "title": "Event title", "titleLabel": "English", diff --git a/src/locales/fr/transalationFr.json b/src/locales/fr/transalationFr.json index 3f112e773..d1fff3586 100644 --- a/src/locales/fr/transalationFr.json +++ b/src/locales/fr/transalationFr.json @@ -130,6 +130,12 @@ "addMoreDetails": "Ajouter plus de détails à votre événement", "allDone": "Terminé", "featuredEvent": "Événement vedette", + "fallbackConfirm": { + "contentPart1": "Vous n'avez pas mis à jour tous les textes qui ne correspondent pas à la langue de votre site web. ", + "contentPart2": "Voulez-vous publier tel quel ? ", + "title": "Publier l'événement", + "publish": "Publier" + }, "dataSource": "Data source", "question": { "firstPart": "Est-ce le bon événement ? Si non, ", diff --git a/src/pages/Dashboard/AddEvent/AddEvent.jsx b/src/pages/Dashboard/AddEvent/AddEvent.jsx index c86afc098..9ab0ad91d 100644 --- a/src/pages/Dashboard/AddEvent/AddEvent.jsx +++ b/src/pages/Dashboard/AddEvent/AddEvent.jsx @@ -1,6 +1,7 @@ import React, { useEffect, useState, useRef, useCallback } from 'react'; import './addEvent.css'; import { Form, Row, Col, Input, message, Button, notification } from 'antd'; +import { Confirm } from '../../../components/Modal/Confirm/Confirm'; import { SyncOutlined, InfoCircleOutlined, @@ -21,7 +22,7 @@ import { PathName } from '../../../constants/pathName'; import Outlined from '../../../components/Button/Outlined'; import PrimaryButton from '../../../components/Button/Primary'; import OutlinedButton from '../../..//components/Button/Outlined'; -import { useTranslation } from 'react-i18next'; +import { Translation, useTranslation } from 'react-i18next'; import { useDispatch, useSelector } from 'react-redux'; import { getUserDetails } from '../../../redux/reducer/userSlice'; import { userRoles } from '../../../constants/userRoles'; @@ -99,7 +100,6 @@ import { clearActiveFallbackFieldsInfo, getActiveFallbackFieldsInfo, getLanguageLiteralBannerDisplayStatus, - setActiveFallbackFieldsInfo, setLanguageLiteralBannerDisplayStatus, } from '../../../redux/reducer/languageLiteralSlice'; import { removeUneditedFallbackValues } from '../../../utils/removeUneditedFallbackValues'; @@ -367,6 +367,66 @@ function AddEvent() { let eventObj; + const englishVirtualLocation = removeUneditedFallbackValues({ + values: values?.englishVirtualLocation?.trim(), + activeFallbackFieldsInfo, + fieldName: 'frenchVirtualLocation-englishVirtualLocation', + property: 'en', + }); + const frenchVirtualLocation = removeUneditedFallbackValues({ + values: values?.frenchVirtualLocation?.trim(), + activeFallbackFieldsInfo, + fieldName: 'frenchVirtualLocation-englishVirtualLocation', + property: 'fr', + }); + const englishContactTitle = removeUneditedFallbackValues({ + values: values?.englishContactTitle?.trim(), + activeFallbackFieldsInfo, + fieldName: 'frenchContactTitle-englishContactTitle', + property: 'en', + }); + const frenchContactTitle = removeUneditedFallbackValues({ + values: values?.frenchContactTitle?.trim(), + activeFallbackFieldsInfo, + fieldName: 'frenchContactTitle-englishContactTitle', + property: 'fr', + }); + const englishTicketNote = removeUneditedFallbackValues({ + values: values?.englishTicketNote?.trim() !== '', + activeFallbackFieldsInfo, + fieldName: 'frenchTicketNote-englishTicketNote', + property: 'en', + }); + const frenchTicketNote = removeUneditedFallbackValues({ + values: values?.frenchTicketNote?.trim(), + activeFallbackFieldsInfo, + fieldName: 'frenchTicketNote-englishTicketNote', + property: 'fr', + }); + const descriptionFr = removeUneditedFallbackValues({ + values: values?.frenchEditor?.trim(), + activeFallbackFieldsInfo, + fieldName: 'frenchEditor-englishEditor', + property: 'fr', + }); + const descriptionEn = removeUneditedFallbackValues({ + values: values?.englishEditor?.trim(), + activeFallbackFieldsInfo, + fieldName: 'frenchEditor-englishEditor', + property: 'en', + }); + const nameFr = removeUneditedFallbackValues({ + values: values?.french?.trim(), + activeFallbackFieldsInfo, + fieldName: 'french-english', + property: 'fr', + }); + const nameEn = removeUneditedFallbackValues({ + values: values?.english?.trim(), + activeFallbackFieldsInfo, + fieldName: 'french-english', + property: 'en', + }); // Use a regular expression to remove


tags at the end if (dateType === dateTypes.SINGLE) { @@ -454,19 +514,6 @@ function AddEvent() { }; } if (values?.frenchVirtualLocation || values?.englishVirtualLocation || values?.virtualLocationOnlineLink) { - const englishVirtualLocation = removeUneditedFallbackValues({ - values: values?.englishVirtualLocation?.trim(), - activeFallbackFieldsInfo, - fieldName: 'frenchVirtualLocation-englishVirtualLocation', - property: 'en', - }); - const frenchVirtualLocation = removeUneditedFallbackValues({ - values: values?.frenchVirtualLocation?.trim(), - activeFallbackFieldsInfo, - fieldName: 'frenchVirtualLocation-englishVirtualLocation', - property: 'fr', - }); - const name = {}; if (frenchVirtualLocation) name['fr'] = frenchVirtualLocation; @@ -492,18 +539,7 @@ function AddEvent() { values?.contactPhoneNumber ) { const name = {}; - const englishContactTitle = removeUneditedFallbackValues({ - values: values?.englishContactTitle?.trim(), - activeFallbackFieldsInfo, - fieldName: 'frenchContactTitle-englishContactTitle', - property: 'en', - }); - const frenchContactTitle = removeUneditedFallbackValues({ - values: values?.frenchContactTitle?.trim(), - activeFallbackFieldsInfo, - fieldName: 'frenchContactTitle-englishContactTitle', - property: 'fr', - }); + if (frenchContactTitle) name['en'] = frenchContactTitle; if (englishContactTitle) name['fr'] = englishContactTitle; @@ -537,18 +573,6 @@ function AddEvent() { if (ticketType) { const name = {}; - const englishTicketNote = removeUneditedFallbackValues({ - values: values?.englishTicketNote?.trim() !== '', - activeFallbackFieldsInfo, - fieldName: 'frenchTicketNote-englishTicketNote', - property: 'en', - }); - const frenchTicketNote = removeUneditedFallbackValues({ - values: values?.frenchTicketNote?.trim(), - activeFallbackFieldsInfo, - fieldName: 'frenchTicketNote-englishTicketNote', - property: 'fr', - }); if (englishTicketNote) name['en'] = englishTicketNote; if (frenchTicketNote) name['fr'] = frenchTicketNote; @@ -644,19 +668,6 @@ function AddEvent() { }); } - const descriptionFr = removeUneditedFallbackValues({ - values: values?.frenchEditor?.trim(), - activeFallbackFieldsInfo, - fieldName: 'frenchEditor-englishEditor', - property: 'fr', - }); - const descriptionEn = removeUneditedFallbackValues({ - values: values?.englishEditor?.trim(), - activeFallbackFieldsInfo, - fieldName: 'frenchEditor-englishEditor', - property: 'en', - }); - if (descriptionFr) description = { fr: descriptionFr, @@ -667,19 +678,6 @@ function AddEvent() { en: descriptionEn, }; - const nameFr = removeUneditedFallbackValues({ - values: values?.french?.trim(), - activeFallbackFieldsInfo, - fieldName: 'french-english', - property: 'fr', - }); - const nameEn = removeUneditedFallbackValues({ - values: values?.english?.trim(), - activeFallbackFieldsInfo, - fieldName: 'french-english', - property: 'en', - }); - if (nameEn) name['en'] = nameEn; if (nameFr) name['fr'] = nameFr; @@ -825,32 +823,55 @@ function AddEvent() { form .validateFields(type === 'PUBLISH' || type === 'REVIEW' ? validateFields : []) .then(() => { - if (isValuesChanged && type !== 'PUBLISH') { - saveAsDraftHandler(event, type !== 'PUBLISH', eventPublishState.DRAFT) - .then((id) => { - updateEventState({ id, calendarId }) - .then(() => { - notification.success({ - description: - calendar[0]?.role === userRoles.GUEST - ? t('dashboard.events.addEditEvent.notification.sendToReview') - : eventData?.publishState === eventPublishState.DRAFT - ? t('dashboard.events.addEditEvent.notification.publish') - : t('dashboard.events.addEditEvent.notification.saveAsDraft'), - placement: 'top', - closeIcon: <>, - maxCount: 1, - duration: 3, - }); - navigate(`${PathName.Dashboard}/${calendarId}${PathName.Events}`); - }) - .catch((error) => console.log(error)); - }) - .catch((error) => console.log(error)); - } else if ((isValuesChanged || duplicateId) && (type === 'PUBLISH' || type === 'REVIEW')) { - saveAsDraftHandler(event, type === 'PUBLISH' || 'REVIEW', eventPublishState.DRAFT) - .then((id) => { - updateEventState({ id: eventId ?? id, calendarId, publishState }) + const reviewPublishAction = () => { + if (isValuesChanged && type !== 'PUBLISH') { + saveAsDraftHandler(event, type !== 'PUBLISH', eventPublishState.DRAFT) + .then((id) => { + updateEventState({ id, calendarId }) + .then(() => { + notification.success({ + description: + calendar[0]?.role === userRoles.GUEST + ? t('dashboard.events.addEditEvent.notification.sendToReview') + : eventData?.publishState === eventPublishState.DRAFT + ? t('dashboard.events.addEditEvent.notification.publish') + : t('dashboard.events.addEditEvent.notification.saveAsDraft'), + placement: 'top', + closeIcon: <>, + maxCount: 1, + duration: 3, + }); + navigate(`${PathName.Dashboard}/${calendarId}${PathName.Events}`); + }) + .catch((error) => console.log(error)); + }) + .catch((error) => console.log(error)); + } else if ((isValuesChanged || duplicateId) && (type === 'PUBLISH' || type === 'REVIEW')) { + saveAsDraftHandler(event, type === 'PUBLISH' || 'REVIEW', eventPublishState.DRAFT) + .then((id) => { + updateEventState({ id: eventId ?? id, calendarId, publishState }) + .unwrap() + .then(() => { + notification.success({ + description: + calendar[0]?.role === userRoles.GUEST + ? t('dashboard.events.addEditEvent.notification.sendToReview') + : eventData?.publishState === eventPublishState.DRAFT + ? t('dashboard.events.addEditEvent.notification.publish') + : t('dashboard.events.addEditEvent.notification.saveAsDraft'), + placement: 'top', + closeIcon: <>, + maxCount: 1, + duration: 3, + }); + navigate(`${PathName.Dashboard}/${calendarId}${PathName.Events}`); + }) + .catch((error) => console.log(error)); + }) + .catch((error) => console.log(error)); + } else { + if (eventId) { + updateEventState({ id: eventId, calendarId, publishState }) .unwrap() .then(() => { notification.success({ @@ -868,30 +889,34 @@ function AddEvent() { navigate(`${PathName.Dashboard}/${calendarId}${PathName.Events}`); }) .catch((error) => console.log(error)); - }) - .catch((error) => console.log(error)); - } else { - if (eventId) { - updateEventState({ id: eventId, calendarId, publishState }) - .unwrap() - .then(() => { - notification.success({ - description: - calendar[0]?.role === userRoles.GUEST - ? t('dashboard.events.addEditEvent.notification.sendToReview') - : eventData?.publishState === eventPublishState.DRAFT - ? t('dashboard.events.addEditEvent.notification.publish') - : t('dashboard.events.addEditEvent.notification.saveAsDraft'), - placement: 'top', - closeIcon: <>, - maxCount: 1, - duration: 3, - }); - navigate(`${PathName.Dashboard}/${calendarId}${PathName.Events}`); - }) - .catch((error) => console.log(error)); + } } - } + }; + if (Object.keys(activeFallbackFieldsInfo).length > 0) { + Confirm({ + title: t('dashboard.events.addEditEvent.fallbackConfirm.title'), + content: ( + + {(t) => ( +

+ {t('dashboard.events.addEditEvent.fallbackConfirm.contentPart1')} +

+

+ {t('dashboard.events.addEditEvent.fallbackConfirm.contentPart2')}` +

+ )} + + ), + okText: t('dashboard.events.addEditEvent.fallbackConfirm.publish'), + cancelText: t('dashboard.places.deletePlace.cancel'), + className: 'fallback-modal-container', + onAction: () => { + dispatch(setLanguageLiteralBannerDisplayStatus(false)); + dispatch(clearActiveFallbackFieldsInfo()); + reviewPublishAction(); + }, + }); + } else reviewPublishAction(); }) .catch((error) => { console.log(error); @@ -1258,7 +1283,7 @@ function AddEvent() { }; useEffect(() => { - dispatch(setActiveFallbackFieldsInfo({})); + dispatch(clearActiveFallbackFieldsInfo()); }, []); useEffect(() => { diff --git a/src/pages/Dashboard/AddEvent/addEvent.css b/src/pages/Dashboard/AddEvent/addEvent.css index 1fa29fcf3..8dbbf8de9 100644 --- a/src/pages/Dashboard/AddEvent/addEvent.css +++ b/src/pages/Dashboard/AddEvent/addEvent.css @@ -201,6 +201,19 @@ color: #1572bb; } +.fallback-modal-container .ant-modal-confirm-content > div { + background: #fffbe5 !important; +} + +.fallback-modal-container .ant-modal-confirm-content > div :last-child { + color: #8c7911 !important; +} + +.fallback-modal-container .ant-modal-confirm-btns button:last-child { + background: #1b3de6 !important; + border-color: #1b3de6; +} + @media screen and (max-width: 480px) { .add-edit-wrapper .add-edit-event-heading h4 { font-size: 24px; diff --git a/src/pages/Dashboard/CreateNewOrganization/CreateNewOrganization.jsx b/src/pages/Dashboard/CreateNewOrganization/CreateNewOrganization.jsx index 612b6579c..7a5c22d00 100644 --- a/src/pages/Dashboard/CreateNewOrganization/CreateNewOrganization.jsx +++ b/src/pages/Dashboard/CreateNewOrganization/CreateNewOrganization.jsx @@ -68,7 +68,6 @@ import { clearActiveFallbackFieldsInfo, getActiveFallbackFieldsInfo, getLanguageLiteralBannerDisplayStatus, - setActiveFallbackFieldsInfo, setLanguageLiteralBannerDisplayStatus, } from '../../../redux/reducer/languageLiteralSlice'; import Alert from '../../../components/Alert'; @@ -670,7 +669,7 @@ function CreateNewOrganization() { }, [addedFields]); useEffect(() => { - dispatch(setActiveFallbackFieldsInfo({})); + dispatch(clearActiveFallbackFieldsInfo()); }, []); useEffect(() => { diff --git a/src/pages/Dashboard/CreateNewPerson/CreateNewPerson.jsx b/src/pages/Dashboard/CreateNewPerson/CreateNewPerson.jsx index 5c9c642fa..a43a47f39 100644 --- a/src/pages/Dashboard/CreateNewPerson/CreateNewPerson.jsx +++ b/src/pages/Dashboard/CreateNewPerson/CreateNewPerson.jsx @@ -48,7 +48,6 @@ import { clearActiveFallbackFieldsInfo, getActiveFallbackFieldsInfo, getLanguageLiteralBannerDisplayStatus, - setActiveFallbackFieldsInfo, setLanguageLiteralBannerDisplayStatus, } from '../../../redux/reducer/languageLiteralSlice'; import Alert from '../../../components/Alert'; @@ -359,7 +358,7 @@ function CreateNewPerson() { }; useEffect(() => { - dispatch(setActiveFallbackFieldsInfo({})); + dispatch(clearActiveFallbackFieldsInfo()); }, []); useEffect(() => { diff --git a/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx b/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx index f99946b69..e9ff32ebb 100644 --- a/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx +++ b/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx @@ -87,7 +87,6 @@ import { clearActiveFallbackFieldsInfo, getActiveFallbackFieldsInfo, getLanguageLiteralBannerDisplayStatus, - setActiveFallbackFieldsInfo, setLanguageLiteralBannerDisplayStatus, } from '../../../redux/reducer/languageLiteralSlice'; import Alert from '../../../components/Alert'; @@ -790,7 +789,7 @@ function CreateNewPlace() { }, []); useEffect(() => { - dispatch(setActiveFallbackFieldsInfo({})); + dispatch(clearActiveFallbackFieldsInfo()); }, []); useEffect(() => { From 4aec7c75eaa0bc7d0bf69de19d570583e06efb85 Mon Sep 17 00:00:00 2001 From: syam babu Date: Tue, 23 Apr 2024 18:50:56 +0530 Subject: [PATCH 14/22] fix: moved confirm popup logic to saveasDrafthandler --- src/pages/Dashboard/AddEvent/AddEvent.jsx | 1057 +++++++++++---------- 1 file changed, 530 insertions(+), 527 deletions(-) diff --git a/src/pages/Dashboard/AddEvent/AddEvent.jsx b/src/pages/Dashboard/AddEvent/AddEvent.jsx index 9ab0ad91d..7e5b91806 100644 --- a/src/pages/Dashboard/AddEvent/AddEvent.jsx +++ b/src/pages/Dashboard/AddEvent/AddEvent.jsx @@ -325,495 +325,525 @@ function AddEvent() { event?.preventDefault(); const previousShowDialog = showDialog; setShowDialog(false); - var promise = new Promise(function (resolve, reject) { - form - .validateFields([ - ...new Set([ - 'french', - 'english', - 'datePicker', - 'dateRangePicker', - 'datePickerWrapper', - 'startDateRecur', - 'contactWebsiteUrl', - 'eventLink', - 'videoLink', - 'facebookLink', - ...(eventId && eventData?.publishState === eventPublishState.PUBLISHED && type !== eventPublishState.DRAFT - ? validateFields - : []), - ]), - ]) - .then(() => { - var values = form.getFieldsValue(true); - var startDateTime, - endDateTime, - additionalType = [], - audience = [], - contactPoint, - accessibility = [], - accessibilityNote, - keywords = [], - locationId, - offerConfiguration, - organizers = [], - performers = [], - collaborators = [], - dynamicFields = [], - recurringEvent, - description = {}, - name = {}, - inLanguage = []; + const action = () => { + var promise = new Promise(function (resolve, reject) { + form + .validateFields([ + ...new Set([ + 'french', + 'english', + 'datePicker', + 'dateRangePicker', + 'datePickerWrapper', + 'startDateRecur', + 'contactWebsiteUrl', + 'eventLink', + 'videoLink', + 'facebookLink', + ...(eventId && eventData?.publishState === eventPublishState.PUBLISHED && type !== eventPublishState.DRAFT + ? validateFields + : []), + ]), + ]) + .then(() => { + var values = form.getFieldsValue(true); + var startDateTime, + endDateTime, + additionalType = [], + audience = [], + contactPoint, + accessibility = [], + accessibilityNote, + keywords = [], + locationId, + offerConfiguration, + organizers = [], + performers = [], + collaborators = [], + dynamicFields = [], + recurringEvent, + description = {}, + name = {}, + inLanguage = []; - let eventObj; + let eventObj; - const englishVirtualLocation = removeUneditedFallbackValues({ - values: values?.englishVirtualLocation?.trim(), - activeFallbackFieldsInfo, - fieldName: 'frenchVirtualLocation-englishVirtualLocation', - property: 'en', - }); - const frenchVirtualLocation = removeUneditedFallbackValues({ - values: values?.frenchVirtualLocation?.trim(), - activeFallbackFieldsInfo, - fieldName: 'frenchVirtualLocation-englishVirtualLocation', - property: 'fr', - }); - const englishContactTitle = removeUneditedFallbackValues({ - values: values?.englishContactTitle?.trim(), - activeFallbackFieldsInfo, - fieldName: 'frenchContactTitle-englishContactTitle', - property: 'en', - }); - const frenchContactTitle = removeUneditedFallbackValues({ - values: values?.frenchContactTitle?.trim(), - activeFallbackFieldsInfo, - fieldName: 'frenchContactTitle-englishContactTitle', - property: 'fr', - }); - const englishTicketNote = removeUneditedFallbackValues({ - values: values?.englishTicketNote?.trim() !== '', - activeFallbackFieldsInfo, - fieldName: 'frenchTicketNote-englishTicketNote', - property: 'en', - }); - const frenchTicketNote = removeUneditedFallbackValues({ - values: values?.frenchTicketNote?.trim(), - activeFallbackFieldsInfo, - fieldName: 'frenchTicketNote-englishTicketNote', - property: 'fr', - }); - const descriptionFr = removeUneditedFallbackValues({ - values: values?.frenchEditor?.trim(), - activeFallbackFieldsInfo, - fieldName: 'frenchEditor-englishEditor', - property: 'fr', - }); - const descriptionEn = removeUneditedFallbackValues({ - values: values?.englishEditor?.trim(), - activeFallbackFieldsInfo, - fieldName: 'frenchEditor-englishEditor', - property: 'en', - }); - const nameFr = removeUneditedFallbackValues({ - values: values?.french?.trim(), - activeFallbackFieldsInfo, - fieldName: 'french-english', - property: 'fr', - }); - const nameEn = removeUneditedFallbackValues({ - values: values?.english?.trim(), - activeFallbackFieldsInfo, - fieldName: 'french-english', - property: 'en', - }); - // Use a regular expression to remove


tags at the end + const englishVirtualLocation = removeUneditedFallbackValues({ + values: values?.englishVirtualLocation?.trim(), + activeFallbackFieldsInfo, + fieldName: 'frenchVirtualLocation-englishVirtualLocation', + property: 'en', + }); + const frenchVirtualLocation = removeUneditedFallbackValues({ + values: values?.frenchVirtualLocation?.trim(), + activeFallbackFieldsInfo, + fieldName: 'frenchVirtualLocation-englishVirtualLocation', + property: 'fr', + }); + const englishContactTitle = removeUneditedFallbackValues({ + values: values?.englishContactTitle?.trim(), + activeFallbackFieldsInfo, + fieldName: 'frenchContactTitle-englishContactTitle', + property: 'en', + }); + const frenchContactTitle = removeUneditedFallbackValues({ + values: values?.frenchContactTitle?.trim(), + activeFallbackFieldsInfo, + fieldName: 'frenchContactTitle-englishContactTitle', + property: 'fr', + }); - if (dateType === dateTypes.SINGLE) { - if (values?.startTime) startDateTime = dateTimeConverter(values?.datePicker, values?.startTime); - else - startDateTime = moment - .tz(values?.datePicker, eventData?.scheduleTimezone ?? 'Canada/Eastern') - .format('YYYY-MM-DD'); - if (values?.endTime) endDateTime = dateTimeConverter(values?.datePicker, values?.endTime); - } - if (dateType === dateTypes.RANGE) { - if (values?.startTime) startDateTime = dateTimeConverter(values?.dateRangePicker[0], values?.startTime); - else - startDateTime = moment - .tz(values?.dateRangePicker[0], eventData?.scheduleTimezone ?? 'Canada/Eastern') - .format('YYYY-MM-DD'); - if (values?.endTime) endDateTime = dateTimeConverter(values?.dateRangePicker[1], values?.endTime); - else - endDateTime = moment - .tz(values?.dateRangePicker[1], eventData?.scheduleTimezone ?? 'Canada/Eastern') - .format('YYYY-MM-DD'); - } - if (dateType === dateTypes.MULTIPLE) { - const recurEvent = { - frequency: values.frequency, - startDate: - form.getFieldsValue().frequency !== 'CUSTOM' - ? moment(values.startDateRecur[0]).format('YYYY-MM-DD') - : undefined, - endDate: - form.getFieldsValue().frequency !== 'CUSTOM' - ? moment(values.startDateRecur[1]).format('YYYY-MM-DD') - : undefined, - startTime: - form.getFieldsValue().frequency !== 'CUSTOM' - ? values.startTimeRecur - ? moment(values.startTimeRecur).format('HH:mm') - : undefined - : undefined, - endTime: - form.getFieldsValue().frequency !== 'CUSTOM' && values.endTimeRecur - ? moment(values.endTimeRecur).format('HH:mm') - : undefined, - weekDays: values.frequency === 'WEEKLY' ? values.daysOfWeek : undefined, - customDates: form.getFieldsValue().frequency === 'CUSTOM' ? form.getFieldsValue().customDates : undefined, - }; - recurringEvent = recurEvent; - } - if (values?.eventType) { - additionalType = values?.eventType?.map((eventTypeId) => { - return { - entityId: eventTypeId, - }; + console.log(values?.englishTicketNote); + const englishTicketNote = removeUneditedFallbackValues({ + values: values?.englishTicketNote?.trim() !== '', + activeFallbackFieldsInfo, + fieldName: 'frenchTicketNote-englishTicketNote', + property: 'en', }); - } - if (values?.targetAudience) { - audience = values?.targetAudience?.map((audienceId) => { - return { - entityId: audienceId, - }; + const frenchTicketNote = removeUneditedFallbackValues({ + values: values?.frenchTicketNote?.trim(), + activeFallbackFieldsInfo, + fieldName: 'frenchTicketNote-englishTicketNote', + property: 'fr', }); - } - if (values?.inLanguage) { - inLanguage = values?.inLanguage?.map((inLanguageId) => { - return { - entityId: inLanguageId, - }; + const descriptionFr = removeUneditedFallbackValues({ + values: values?.frenchEditor?.trim(), + activeFallbackFieldsInfo, + fieldName: 'frenchEditor-englishEditor', + property: 'fr', }); - } - if (values?.locationPlace || values?.locationPlace?.length > 0) { - let place; - if ( - locationPlace?.source === sourceOptions.CMS || - locationPlace?.source === externalSourceOptions.FOOTLIGHT - ) - place = { - entityId: values?.locationPlace, + const descriptionEn = removeUneditedFallbackValues({ + values: values?.englishEditor?.trim(), + activeFallbackFieldsInfo, + fieldName: 'frenchEditor-englishEditor', + property: 'en', + }); + const nameFr = removeUneditedFallbackValues({ + values: values?.french?.trim(), + activeFallbackFieldsInfo, + fieldName: 'french-english', + property: 'fr', + }); + const nameEn = removeUneditedFallbackValues({ + values: values?.english?.trim(), + activeFallbackFieldsInfo, + fieldName: 'french-english', + property: 'en', + }); + // Use a regular expression to remove


tags at the end + + if (dateType === dateTypes.SINGLE) { + if (values?.startTime) startDateTime = dateTimeConverter(values?.datePicker, values?.startTime); + else + startDateTime = moment + .tz(values?.datePicker, eventData?.scheduleTimezone ?? 'Canada/Eastern') + .format('YYYY-MM-DD'); + if (values?.endTime) endDateTime = dateTimeConverter(values?.datePicker, values?.endTime); + } + if (dateType === dateTypes.RANGE) { + if (values?.startTime) startDateTime = dateTimeConverter(values?.dateRangePicker[0], values?.startTime); + else + startDateTime = moment + .tz(values?.dateRangePicker[0], eventData?.scheduleTimezone ?? 'Canada/Eastern') + .format('YYYY-MM-DD'); + if (values?.endTime) endDateTime = dateTimeConverter(values?.dateRangePicker[1], values?.endTime); + else + endDateTime = moment + .tz(values?.dateRangePicker[1], eventData?.scheduleTimezone ?? 'Canada/Eastern') + .format('YYYY-MM-DD'); + } + if (dateType === dateTypes.MULTIPLE) { + const recurEvent = { + frequency: values.frequency, + startDate: + form.getFieldsValue().frequency !== 'CUSTOM' + ? moment(values.startDateRecur[0]).format('YYYY-MM-DD') + : undefined, + endDate: + form.getFieldsValue().frequency !== 'CUSTOM' + ? moment(values.startDateRecur[1]).format('YYYY-MM-DD') + : undefined, + startTime: + form.getFieldsValue().frequency !== 'CUSTOM' + ? values.startTimeRecur + ? moment(values.startTimeRecur).format('HH:mm') + : undefined + : undefined, + endTime: + form.getFieldsValue().frequency !== 'CUSTOM' && values.endTimeRecur + ? moment(values.endTimeRecur).format('HH:mm') + : undefined, + weekDays: values.frequency === 'WEEKLY' ? values.daysOfWeek : undefined, + customDates: + form.getFieldsValue().frequency === 'CUSTOM' ? form.getFieldsValue().customDates : undefined, }; - else if (locationPlace?.source === sourceOptions.ARTSDATA) - place = { - uri: values?.locationPlace, + recurringEvent = recurEvent; + } + if (values?.eventType) { + additionalType = values?.eventType?.map((eventTypeId) => { + return { + entityId: eventTypeId, + }; + }); + } + if (values?.targetAudience) { + audience = values?.targetAudience?.map((audienceId) => { + return { + entityId: audienceId, + }; + }); + } + if (values?.inLanguage) { + inLanguage = values?.inLanguage?.map((inLanguageId) => { + return { + entityId: inLanguageId, + }; + }); + } + if (values?.locationPlace || values?.locationPlace?.length > 0) { + let place; + if ( + locationPlace?.source === sourceOptions.CMS || + locationPlace?.source === externalSourceOptions.FOOTLIGHT + ) + place = { + entityId: values?.locationPlace, + }; + else if (locationPlace?.source === sourceOptions.ARTSDATA) + place = { + uri: values?.locationPlace, + }; + locationId = { + place, }; - locationId = { - place, - }; - } - if (values?.frenchVirtualLocation || values?.englishVirtualLocation || values?.virtualLocationOnlineLink) { - const name = {}; + } + if (values?.frenchVirtualLocation || values?.englishVirtualLocation || values?.virtualLocationOnlineLink) { + const name = {}; - if (frenchVirtualLocation) name['fr'] = frenchVirtualLocation; - if (englishVirtualLocation) name['en'] = englishVirtualLocation; + if (frenchVirtualLocation) name['fr'] = frenchVirtualLocation; + if (englishVirtualLocation) name['en'] = englishVirtualLocation; - locationId = { - ...locationId, - virtualLocation: { - name, - description: {}, - dynamicFields: [], - url: { - uri: urlProtocolCheck(values?.virtualLocationOnlineLink), + locationId = { + ...locationId, + virtualLocation: { + name, + description: {}, + dynamicFields: [], + url: { + uri: urlProtocolCheck(values?.virtualLocationOnlineLink), + }, }, - }, - }; - } - if ( - values?.frenchContactTitle || - values?.englishContactTitle || - values?.contactWebsiteUrl || - values?.contactEmail || - values?.contactPhoneNumber - ) { - const name = {}; + }; + } + if ( + values?.frenchContactTitle || + values?.englishContactTitle || + values?.contactWebsiteUrl || + values?.contactEmail || + values?.contactPhoneNumber + ) { + const name = {}; - if (frenchContactTitle) name['en'] = frenchContactTitle; - if (englishContactTitle) name['fr'] = englishContactTitle; + if (frenchContactTitle) name['en'] = frenchContactTitle; + if (englishContactTitle) name['fr'] = englishContactTitle; - contactPoint = { - name, - url: { - uri: urlProtocolCheck(values?.contactWebsiteUrl), - }, - email: values?.contactEmail, - telephone: values?.contactPhoneNumber, - }; - } - if (values?.eventAccessibility) { - accessibility = values?.eventAccessibility?.map((accessibilityId) => { - return { - entityId: accessibilityId, + contactPoint = { + name, + url: { + uri: urlProtocolCheck(values?.contactWebsiteUrl), + }, + email: values?.contactEmail, + telephone: values?.contactPhoneNumber, }; - }); - } + } + if (values?.eventAccessibility) { + accessibility = values?.eventAccessibility?.map((accessibilityId) => { + return { + entityId: accessibilityId, + }; + }); + } - if (values?.englishAccessibilityNote || values?.frenchAccessibilityNote) { - accessibilityNote = { - ...(values?.englishAccessibilityNote && { en: values?.englishAccessibilityNote?.trim() }), - ...(values?.frenchAccessibilityNote && { fr: values?.frenchAccessibilityNote?.trim() }), - }; - } + if (values?.englishAccessibilityNote || values?.frenchAccessibilityNote) { + accessibilityNote = { + ...(values?.englishAccessibilityNote && { en: values?.englishAccessibilityNote?.trim() }), + ...(values?.frenchAccessibilityNote && { fr: values?.frenchAccessibilityNote?.trim() }), + }; + } - if (values?.keywords?.length > 0) { - keywords = values?.keywords; - } + if (values?.keywords?.length > 0) { + keywords = values?.keywords; + } - if (ticketType) { - const name = {}; + if (ticketType) { + const name = {}; - if (englishTicketNote) name['en'] = englishTicketNote; - if (frenchTicketNote) name['fr'] = frenchTicketNote; + if (englishTicketNote) name['en'] = englishTicketNote; + if (frenchTicketNote) name['fr'] = frenchTicketNote; - offerConfiguration = { - category: ticketType, - ...((values?.englishTicketNote || values?.frenchTicketNote) && { - name, - }), - ...(ticketType === offerTypes.PAYING && - values?.prices?.length > 0 && - values?.prices[0] && { - prices: values?.prices?.filter((element) => element != null || element != undefined), - }), - priceCurrency: 'CAD', - ...(ticketType === offerTypes.PAYING && - values?.ticketLink && - values?.ticketLinkType == ticketLinkOptions[0].value && { - url: { - uri: urlProtocolCheck(values?.ticketLink), - }, - }), - ...(ticketType === offerTypes.PAYING && - values?.ticketLink && - values?.ticketLinkType == ticketLinkOptions[1].value && { - email: values?.ticketLink, + offerConfiguration = { + category: ticketType, + ...((values?.englishTicketNote || values?.frenchTicketNote) && { + name, }), - ...(ticketType === offerTypes.REGISTER && - values?.registerLink && - values?.ticketLinkType === ticketLinkOptions[0].value && { - url: { - uri: urlProtocolCheck(values?.registerLink), - }, - }), - ...(ticketType === offerTypes.REGISTER && - values?.registerLink && - values?.ticketLinkType === ticketLinkOptions[1].value && { - email: values?.registerLink, - }), - }; - } + ...(ticketType === offerTypes.PAYING && + values?.prices?.length > 0 && + values?.prices[0] && { + prices: values?.prices?.filter((element) => element != null || element != undefined), + }), + priceCurrency: 'CAD', + ...(ticketType === offerTypes.PAYING && + values?.ticketLink && + values?.ticketLinkType == ticketLinkOptions[0].value && { + url: { + uri: urlProtocolCheck(values?.ticketLink), + }, + }), + ...(ticketType === offerTypes.PAYING && + values?.ticketLink && + values?.ticketLinkType == ticketLinkOptions[1].value && { + email: values?.ticketLink, + }), + ...(ticketType === offerTypes.REGISTER && + values?.registerLink && + values?.ticketLinkType === ticketLinkOptions[0].value && { + url: { + uri: urlProtocolCheck(values?.registerLink), + }, + }), + ...(ticketType === offerTypes.REGISTER && + values?.registerLink && + values?.ticketLinkType === ticketLinkOptions[1].value && { + email: values?.registerLink, + }), + }; + } - if (values?.organizers) { - organizers = values?.organizers?.map((organizer) => { - if (organizer?.source === sourceOptions.CMS || organizer?.source === externalSourceOptions.FOOTLIGHT) - return { - entityId: organizer?.value, - type: organizer?.type, - }; - else if (organizer?.source === sourceOptions.ARTSDATA) - return { - uri: organizer?.uri, - type: organizer?.type, - }; - }); - } + if (values?.organizers) { + organizers = values?.organizers?.map((organizer) => { + if (organizer?.source === sourceOptions.CMS || organizer?.source === externalSourceOptions.FOOTLIGHT) + return { + entityId: organizer?.value, + type: organizer?.type, + }; + else if (organizer?.source === sourceOptions.ARTSDATA) + return { + uri: organizer?.uri, + type: organizer?.type, + }; + }); + } - if (values?.performers) { - performers = values?.performers?.map((performer) => { - if (performer?.source === sourceOptions.CMS || performer?.source === externalSourceOptions.FOOTLIGHT) - return { - entityId: performer?.value, - type: performer?.type, - }; - else if (performer?.source === sourceOptions.ARTSDATA) - return { - uri: performer?.uri, - type: performer?.type, - }; - }); - } + if (values?.performers) { + performers = values?.performers?.map((performer) => { + if (performer?.source === sourceOptions.CMS || performer?.source === externalSourceOptions.FOOTLIGHT) + return { + entityId: performer?.value, + type: performer?.type, + }; + else if (performer?.source === sourceOptions.ARTSDATA) + return { + uri: performer?.uri, + type: performer?.type, + }; + }); + } - if (values?.supporters) { - collaborators = values?.supporters?.map((supporter) => { - if (supporter?.source === sourceOptions.CMS || supporter?.source === externalSourceOptions.FOOTLIGHT) - return { - entityId: supporter?.value, - type: supporter?.type, - }; - else if (supporter?.source === sourceOptions.ARTSDATA) + if (values?.supporters) { + collaborators = values?.supporters?.map((supporter) => { + if (supporter?.source === sourceOptions.CMS || supporter?.source === externalSourceOptions.FOOTLIGHT) + return { + entityId: supporter?.value, + type: supporter?.type, + }; + else if (supporter?.source === sourceOptions.ARTSDATA) + return { + uri: supporter?.uri, + type: supporter?.type, + }; + }); + } + if (values?.dynamicFields) { + dynamicFields = Object.keys(values?.dynamicFields)?.map((dynamicField) => { return { - uri: supporter?.uri, - type: supporter?.type, + taxonomyId: dynamicField, + conceptIds: values?.dynamicFields[dynamicField], }; - }); - } - if (values?.dynamicFields) { - dynamicFields = Object.keys(values?.dynamicFields)?.map((dynamicField) => { - return { - taxonomyId: dynamicField, - conceptIds: values?.dynamicFields[dynamicField], + }); + } + + if (descriptionFr) + description = { + fr: descriptionFr, + }; + if (descriptionEn) + description = { + ...description, + en: descriptionEn, }; - }); - } - if (descriptionFr) - description = { - fr: descriptionFr, - }; - if (descriptionEn) - description = { - ...description, - en: descriptionEn, - }; + if (nameEn) name['en'] = nameEn; + if (nameFr) name['fr'] = nameFr; - if (nameEn) name['en'] = nameEn; - if (nameFr) name['fr'] = nameFr; + eventObj = { + name: { ...name, ...eventData?.name }, + ...(values?.startTime && { startDateTime }), + ...(!values?.startTime && { startDate: startDateTime }), + ...(values?.endTime && { endDateTime }), + ...(!values?.endTime && { endDate: endDateTime }), + eventStatus: values?.eventStatus, + ...((values?.englishEditor || values?.frenchEditor) && { description }), + ...(values?.eventAccessibility && { + accessibility, + }), + ...(accessibilityNote && { accessibilityNote }), + additionalType, + audience, - eventObj = { - name: { ...name, ...eventData?.name }, - ...(values?.startTime && { startDateTime }), - ...(!values?.startTime && { startDate: startDateTime }), - ...(values?.endTime && { endDateTime }), - ...(!values?.endTime && { endDate: endDateTime }), - eventStatus: values?.eventStatus, - ...((values?.englishEditor || values?.frenchEditor) && { description }), - ...(values?.eventAccessibility && { - accessibility, - }), - ...(accessibilityNote && { accessibilityNote }), - additionalType, - audience, + url: { + uri: urlProtocolCheck(values?.eventLink), + }, - url: { - uri: urlProtocolCheck(values?.eventLink), - }, + ...(values?.facebookLink && { facebookUrl: urlProtocolCheck(values?.facebookLink) }), + ...(values?.videoLink && { videoUrl: urlProtocolCheck(values?.videoLink) }), + ...(contactPoint && { contactPoint }), + ...(locationId && { locationId }), + ...(keywords && { keywords }), + ...(ticketType && { offerConfiguration }), + ...(values?.organizers && { organizers }), + ...(values?.performers && { performers }), + ...(values?.supporters && { collaborators }), + ...(values?.dynamicFields && { dynamicFields }), + ...(dateTypes.MULTIPLE && { recurringEvent }), + inLanguage, + isFeatured: values?.isFeatured, + }; - ...(values?.facebookLink && { facebookUrl: urlProtocolCheck(values?.facebookLink) }), - ...(values?.videoLink && { videoUrl: urlProtocolCheck(values?.videoLink) }), - ...(contactPoint && { contactPoint }), - ...(locationId && { locationId }), - ...(keywords && { keywords }), - ...(ticketType && { offerConfiguration }), - ...(values?.organizers && { organizers }), - ...(values?.performers && { performers }), - ...(values?.supporters && { collaborators }), - ...(values?.dynamicFields && { dynamicFields }), - ...(dateTypes.MULTIPLE && { recurringEvent }), - inLanguage, - isFeatured: values?.isFeatured, - }; + let imageCrop = form.getFieldValue('imageCrop'); + imageCrop = { + large: { + xCoordinate: imageCrop?.large?.x, + yCoordinate: imageCrop?.large?.y, + height: imageCrop?.large?.height, + width: imageCrop?.large?.width, + }, + thumbnail: { + xCoordinate: imageCrop?.thumbnail?.x, + yCoordinate: imageCrop?.thumbnail?.y, + height: imageCrop?.thumbnail?.height, + width: imageCrop?.thumbnail?.width, + }, + original: { + entityId: imageCrop?.original?.entityId, + height: imageCrop?.original?.height, + width: imageCrop?.original?.width, + }, + }; - let imageCrop = form.getFieldValue('imageCrop'); - imageCrop = { - large: { - xCoordinate: imageCrop?.large?.x, - yCoordinate: imageCrop?.large?.y, - height: imageCrop?.large?.height, - width: imageCrop?.large?.width, - }, - thumbnail: { - xCoordinate: imageCrop?.thumbnail?.x, - yCoordinate: imageCrop?.thumbnail?.y, - height: imageCrop?.thumbnail?.height, - width: imageCrop?.thumbnail?.width, - }, - original: { - entityId: imageCrop?.original?.entityId, - height: imageCrop?.original?.height, - width: imageCrop?.original?.width, - }, - }; + if (values?.dragger?.length > 0 && values?.dragger[0]?.originFileObj) { + const formdata = new FormData(); + formdata.append('file', values?.dragger[0].originFileObj); + formdata && + addImage({ data: formdata, calendarId }) + .unwrap() + .then((response) => { + // let entityId = response?.data?.original?.entityId; + if (featureFlags.imageCropFeature) { + let entityId = response?.data?.original?.entityId; + imageCrop = { + ...imageCrop, + original: { + entityId, + height: response?.data?.height, + width: response?.data?.width, + }, + }; + } else + imageCrop = { + ...imageCrop, + original: { + ...imageCrop?.original, + entityId: response?.data?.original?.entityId, + height: response?.data?.height, + width: response?.data?.width, + }, + }; + eventObj['image'] = imageCrop; + addUpdateEventApiHandler(eventObj, toggle) + .then((id) => resolve(id)) + .catch((error) => { + reject(error); + console.log(error); + }); + }) + .catch((error) => { + console.log(error); + const element = document.getElementsByClassName('draggerWrap'); + element && element[0]?.scrollIntoView({ block: 'center', behavior: 'smooth' }); + }); + } else { + if (values?.draggerWrap) { + if (values?.dragger && values?.dragger?.length == 0) eventObj['image'] = null; + else eventObj['image'] = imageCrop; + } - if (values?.dragger?.length > 0 && values?.dragger[0]?.originFileObj) { - const formdata = new FormData(); - formdata.append('file', values?.dragger[0].originFileObj); - formdata && - addImage({ data: formdata, calendarId }) - .unwrap() - .then((response) => { - // let entityId = response?.data?.original?.entityId; - if (featureFlags.imageCropFeature) { - let entityId = response?.data?.original?.entityId; - imageCrop = { - ...imageCrop, - original: { - entityId, - height: response?.data?.height, - width: response?.data?.width, - }, - }; - } else - imageCrop = { - ...imageCrop, - original: { - ...imageCrop?.original, - entityId: response?.data?.original?.entityId, - height: response?.data?.height, - width: response?.data?.width, - }, - }; - eventObj['image'] = imageCrop; - addUpdateEventApiHandler(eventObj, toggle) - .then((id) => resolve(id)) - .catch((error) => { - reject(error); - console.log(error); - }); - }) + addUpdateEventApiHandler(eventObj, toggle) + .then((id) => resolve(id)) .catch((error) => { + reject(error); console.log(error); - const element = document.getElementsByClassName('draggerWrap'); - element && element[0]?.scrollIntoView({ block: 'center', behavior: 'smooth' }); }); - } else { - if (values?.draggerWrap) { - if (values?.dragger && values?.dragger?.length == 0) eventObj['image'] = null; - else eventObj['image'] = imageCrop; } - - addUpdateEventApiHandler(eventObj, toggle) - .then((id) => resolve(id)) - .catch((error) => { - reject(error); - console.log(error); - }); - } - }) - .catch((error) => { - console.log(error); - reject(error); - setShowDialog(previousShowDialog); - message.warning({ - duration: 10, - maxCount: 1, - key: 'event-save-as-warning', - content: ( - <> - {t('dashboard.events.addEditEvent.validations.errorDraft')}   -