From 2d74117e3ea05d043e9258213822ff80373ff143 Mon Sep 17 00:00:00 2001 From: Ralitsa Ilieva Date: Thu, 26 Oct 2023 11:27:33 +0200 Subject: [PATCH 01/72] New design for campaign news subscription --- README.md | 2 + public/locales/bg/auth.json | 2 + public/locales/bg/campaigns.json | 14 +- public/locales/bg/notifications.json | 6 +- public/locales/bg/validation.json | 1 + public/locales/en/auth.json | 2 + public/locales/en/campaigns.json | 12 + public/locales/en/notifications.json | 16 + public/locales/en/validation.json | 1 + .../client/auth/register/RegisterForm.tsx | 2 +- .../client/campaigns/CampaignDetails.tsx | 64 +++- .../client/campaigns/InlineDonation.tsx | 32 -- .../notifications/CampaignSubscribeModal.tsx | 279 ++++++++++++------ .../client/notifications/SubscriptionPage.tsx | 45 ++- .../common/form/AcceptNewsletterField.tsx | 14 +- 15 files changed, 339 insertions(+), 153 deletions(-) create mode 100644 public/locales/en/notifications.json diff --git a/README.md b/README.md index 1a25cd68c..f7b857938 100644 --- a/README.md +++ b/README.md @@ -100,7 +100,9 @@ Watch releases of this repository to be notified about future updates: ## Contributors ✨ + [![All Contributors](https://img.shields.io/badge/all_contributors-73-orange.svg?style=flat-square)](#contributors-) + Please check [contributors guide](https://github.com/podkrepi-bg/frontend/blob/master/CONTRIBUTING.md) for: diff --git a/public/locales/bg/auth.json b/public/locales/bg/auth.json index de309d026..66e7616da 100644 --- a/public/locales/bg/auth.json +++ b/public/locales/bg/auth.json @@ -11,6 +11,7 @@ }, "cta": { "login": "Вход", + "guest": "Като гост", "logout": "Изход", "register": "Регистрация", "send": "Изпрати", @@ -18,6 +19,7 @@ }, "fields": { "email": "Email", + "email-descriptive": "Въведи email адрес", "password": "Парола", "confirm-password": "Потвърждение на парола", "first-name": "Име", diff --git a/public/locales/bg/campaigns.json b/public/locales/bg/campaigns.json index 1af1f4bf1..037cfac6f 100644 --- a/public/locales/bg/campaigns.json +++ b/public/locales/bg/campaigns.json @@ -54,7 +54,7 @@ "save": "Запази", "submit": "Изпрати", "apply": "Кандидатствайте", - "subscribe": "Абониране за известия", + "subscribe": "Абонирай се за email известия за кампанията", "support": "Дарете", "support-cause-today": "Подкрепете кауза днес!", "support-now": "Подкрепете сега", @@ -76,10 +76,16 @@ "allow-donation-on-complete": "Разрешете дарения след достигане на сумата" }, "subscribe": { - "confirm-sent": "Благодарим ви! На посочения e-mail адрес беше изпратено съобщение за потвърждение на вашето абониране.", - "confirm-subscribe": "Благодарим ви! Абонирахте се успешно.", + "confirm-sent": "Моля, активирай абонамента си от email-a, който ти изпратихме на {{email}}", + "confirm-subscribe": "Записа се успешно.", "subscribe-title": "Абониране за известия и новини от Podkrepi.bg", - "subscribe-campaign-title": "Абониране за известия по тази кампания" + "subscribe-campaign-title": "Абониране за новините по кампанията", + "subscribe-text-nonLoggedUser": "Моля, продължи като гост и въведи email адреса, на който желаеш да получаваш известия за тази кампания, или влез в профила си. Вписвайки се с потребителското си име и парола, ще можеш да управляваш абонамента си от своя Личен профил.", + "subscribe-text-loggedUser": "Моля, избери дали желаеш да получаваш новините за кампанията на email адреса, асоцииран с профила ти, или на алтернативен адрес:", + "subscribe-campaign-subtTitle": "Искам да получавам новини за кампанията на този email адрес:", + "subscribe-button": "Запиши ме", + "profile-button": "На профилния", + "another-button": "На друг" }, "campaign": { "subheading": "Вашата подкрепа променя света и има значение. Всички подкрепящи чрез Подкрепи.бг са наши партньори в подпомагането на кампании за общността. Като щедър дарител Вие ставате важен партньор в подпомагането на кампания за нечие здраве или за успеха на кауза, която ви е близка до сърцето.", diff --git a/public/locales/bg/notifications.json b/public/locales/bg/notifications.json index b65e5c755..6a1a3a9fa 100644 --- a/public/locales/bg/notifications.json +++ b/public/locales/bg/notifications.json @@ -1,7 +1,9 @@ { "subscribe": { - "thank-you-msg": "Абонирането за получаване на известия e успешно! Благодарим ❤️", - "subscription-fail": "Възникна проблем при потвърджаването на абонамента за известия 🙄", + "thank-you-msg-heading": "Абонаментът ти е активен!", + "thank-you-msg-text": "Успешно активира своя абонамент. Очаквай новини от нас на {{email}}", + "subscription-fail-heading": "Възникна грешка", + "subscription-fail-text": "Не успяхме да активираме абонамента ти. Моля, опитай пак.", "cta": "Към сайта", "cta-retry": "Опитай пак" }, diff --git a/public/locales/bg/validation.json b/public/locales/bg/validation.json index 3018432bb..ef89b0927 100644 --- a/public/locales/bg/validation.json +++ b/public/locales/bg/validation.json @@ -16,6 +16,7 @@ "agree-terms": "Съгласявам се с Общите условия", "agree-with": "Съгласявам се с", "agree-with-newsletter": "Съгласявам се да получавам известия ", + "agree-with-newsletter-campaign": "Съгласявам се да получавам новини за тази кампания и известия от Подкрепи.бг *", "informed-agree-with": "Запознат съм и се съгласявам с", "terms-and-conditions": "общите условия", "gdpr": "политиката за защита на личните данни", diff --git a/public/locales/en/auth.json b/public/locales/en/auth.json index 88246118b..d57a3d867 100644 --- a/public/locales/en/auth.json +++ b/public/locales/en/auth.json @@ -10,6 +10,7 @@ }, "cta": { "login": "Login", + "guest": "As guest", "logout": "Logout", "register": "Register", "send": "Send", @@ -17,6 +18,7 @@ }, "fields": { "email": "Email", + "email-descriptive": "Fill in your email", "password": "Password", "confirm-password": "Confirm Password", "first-name": "First name", diff --git a/public/locales/en/campaigns.json b/public/locales/en/campaigns.json index 078e494be..12b18497a 100644 --- a/public/locales/en/campaigns.json +++ b/public/locales/en/campaigns.json @@ -55,6 +55,7 @@ "save": "Save", "submit": "Submit", "apply": "Apply", + "subscribe": "Subscribe for email notifications for the campaign", "support": "Donate", "support-cause-today": "Support a campaign today!", "support-now": "Support now", @@ -74,6 +75,17 @@ "attached-files": "Attached files", "download": "Download" }, + "subscribe": { + "confirm-sent": "Please, activate your subscription from the email that we sent to {{email}}", + "confirm-subscribe": "You subscribed successfully", + "subscribe-campaign-title": "Subscribe for news about the campaign", + "subscribe-text-nonLoggedUser": "Please, proceed as a guest and write down your email, on which you want to receive notifications for this campaign or you can log in. If you log in with your and password you will be able to manage your subscription from your Personal profile", + "subscribe-text-loggedUser": "Please, choose if you want to receive the news about the campaign on your profile email or on another one:", + "subscribe-campaign-subtTitle": "I want to receive news about the campaign on this email:", + "subscribe-button": "Subscribe me", + "profile-button": "On the profile one", + "another-button": "On another one" + }, "campaign": { "subheading": "Your support for the world matters. All supporters through Podkrepi.bg are our partners in supporting the community campaign. As a generous benefactor, you become an important partner in supporting a campaign regarding someone's health or the success of a cause that is close to your heart.", "subheading-bold": "Even the slightest help can be the engine of great change", diff --git a/public/locales/en/notifications.json b/public/locales/en/notifications.json new file mode 100644 index 000000000..3d9f6a360 --- /dev/null +++ b/public/locales/en/notifications.json @@ -0,0 +1,16 @@ +{ + "subscribe": { + "thank-you-msg-heading": "Your subscription is active!", + "thank-you-msg-text": "You successfully activated your subscription. You can wait news from us on {{email}}", + "subscription-fail-heading": "An error occurred", + "subscription-fail-text": "We couldn`t activate your subscription. Please, try again.", + "cta": "To the site", + "cta-retry": "Try again" + }, + "unsubscribe": { + "thank-you-msg": "You successfully deactivated your news subscription!", + "subscription-fail": "An error occurred while deactivating your news subscription", + "cta": "To the site", + "cta-retry": "Try again" + } +} diff --git a/public/locales/en/validation.json b/public/locales/en/validation.json index a91ffb1ac..a296125cf 100644 --- a/public/locales/en/validation.json +++ b/public/locales/en/validation.json @@ -16,6 +16,7 @@ "agree-terms": "Agree to the Terms and Conditions", "agree-with": "I agree to the", "informed-agree-with": "I understand and I agree to the", + "agree-with-newsletter-campaign": "I agree to receive news about this campaign and news by Podkrepi.bg *", "terms-and-conditions": "Terms and Conditions", "gdpr": "General Data Protection Regulation (GDPR)", "legal-entity": "Legal entity", diff --git a/src/components/client/auth/register/RegisterForm.tsx b/src/components/client/auth/register/RegisterForm.tsx index 02f54e986..70e35f4c9 100644 --- a/src/components/client/auth/register/RegisterForm.tsx +++ b/src/components/client/auth/register/RegisterForm.tsx @@ -16,7 +16,7 @@ import PasswordField from 'components/common/form/PasswordField' import AcceptPrivacyPolicyField from 'components/common/form/AcceptPrivacyPolicyField' import AcceptTermsField from 'components/common/form/AcceptTermsField' import EmailField from 'components/common/form/EmailField' -import AcceptNewsLetterField from 'components/common/form/AcceptNewsletterField' +import { AcceptNewsLetterField } from 'components/common/form/AcceptNewsletterField' export type RegisterFormData = { firstName: string diff --git a/src/components/client/campaigns/CampaignDetails.tsx b/src/components/client/campaigns/CampaignDetails.tsx index f75c47610..71e1794d4 100644 --- a/src/components/client/campaigns/CampaignDetails.tsx +++ b/src/components/client/campaigns/CampaignDetails.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useState } from 'react' import { useTranslation } from 'next-i18next' import dynamic from 'next/dynamic' @@ -27,6 +27,12 @@ import { useCanEditCampaign } from 'common/hooks/campaigns' import { moneyPublic } from 'common/util/money' import ReceiptLongIcon from '@mui/icons-material/ReceiptLong' import CampaignPublicExpensesChart from './CampaignPublicExpensesChart' +import EmailIcon from '@mui/icons-material/Email' +import RenderCampaignSubscribeModal from '../notifications/CampaignSubscribeModal' +{ + /* just to test the page. to be removed +// import SubscriptionPage from '../notifications/SubscriptionPage'*/ +} const ReactQuill = dynamic(() => import('react-quill'), { ssr: false }) const CampaignNewsSection = dynamic(() => import('./CampaignNewsSection'), { ssr: false }) @@ -38,6 +44,7 @@ const classes = { campaignTitle: `${PREFIX}-campaignTitle`, linkButton: `${PREFIX}-linkButton`, securityIcon: `${PREFIX}-securityIcon`, + subscribeLink: `${PREFIX}-subscribe`, } const StyledGrid = styled(Grid)(({ theme }) => ({ @@ -90,6 +97,18 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ width: theme.spacing(2.25), height: theme.spacing(2.75), }, + [`& .${classes.subscribeLink}`]: { + fontWeight: 500, + fontSize: theme.typography.pxToRem(16.5), + textAlign: 'center', + + '&:hover': { + textDecoration: 'underline', + transform: 'scale(1.01)', + cursor: 'pointer', + transition: 'all 0.3s ease', + }, + }, })) type Props = { @@ -98,6 +117,7 @@ type Props = { export default function CampaignDetails({ campaign }: Props) { const { t } = useTranslation() + const [subscribeIsOpen, setSubscribeOpen] = useState(false) const sliderImages = campaignSliderUrls(campaign) const canEditCampaign = useCanEditCampaign(campaign.slug) const { data: expensesList } = useCampaignApprovedExpensesList(campaign.slug) @@ -113,7 +133,24 @@ export default function CampaignDetails({ campaign }: Props) { showExpensesLink={(expensesList && expensesList?.length > 0) || canEditCampaign} /> - + {subscribeIsOpen && ( + + )} + + setSubscribeOpen(true)} + cursor="pointer" + /> + setSubscribeOpen(true)} className={classes.subscribeLink}> + {t('campaigns:cta.subscribe')} + + + {/* just to test the page. to be removed + */} + @@ -122,10 +159,6 @@ export default function CampaignDetails({ campaign }: Props) { - - - - {expensesList?.length || canEditCampaign ? ( @@ -174,6 +207,25 @@ export default function CampaignDetails({ campaign }: Props) { '' )} + {subscribeIsOpen && ( + + )} + + setSubscribeOpen(true)} + cursor="pointer" + /> + setSubscribeOpen(true)} className={classes.subscribeLink}> + {t('campaigns:cta.subscribe')} + + + + + + diff --git a/src/components/client/campaigns/InlineDonation.tsx b/src/components/client/campaigns/InlineDonation.tsx index bbfbad613..890cc1f54 100644 --- a/src/components/client/campaigns/InlineDonation.tsx +++ b/src/components/client/campaigns/InlineDonation.tsx @@ -29,7 +29,6 @@ import CustomListItem from 'components/common/navigation/CustomListItem' import { socialMedia } from './helpers/socialMedia' import { CampaignState } from './helpers/campaign.enums' import { AlertStore } from 'stores/AlertStore' -import RenderCampaignSubscribeModal from '../notifications/CampaignSubscribeModal' const PREFIX = 'InlineDonation' @@ -52,7 +51,6 @@ const classes = { campaignInfoKey: `${PREFIX}-campaignInfoKey`, campaignInfoValue: `${PREFIX}-campaignInfoValue`, pagination: `${PREFIX}-pagination`, - subscribeLink: `${PREFIX}-subscribe`, } const StyledGrid = styled(Grid)(({ theme }) => ({ @@ -210,19 +208,6 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ fontSize: theme.typography.pxToRem(15), }, }, - - [`& .${classes.subscribeLink}`]: { - fontWeight: 500, - fontSize: theme.typography.pxToRem(16.5), - textAlign: 'center', - - '&:hover': { - textDecoration: 'underline', - transform: 'scale(1.01)', - cursor: 'pointer', - transition: 'all 0.3s ease', - }, - }, })) type Props = { @@ -233,7 +218,6 @@ export default function InlineDonation({ campaign }: Props) { const { t } = useTranslation('campaigns') const { asPath } = useRouter() const [status, copyUrl] = useCopyToClipboard(baseUrl + asPath, 1000) - const [subscribeIsOpen, setSubscribeOpen] = useState(false) const active = status === 'copied' ? 'inherit' : 'primary' const [page, setPage] = useState(0) const pageSize = 5 @@ -337,22 +321,6 @@ export default function InlineDonation({ campaign }: Props) { - {subscribeIsOpen && ( - - )} - {/* Hide until notifications is ready */} - {/* - setSubscribeOpen(true)} className={classes.subscribeLink}> - {t('campaigns:cta.subscribe')} - - setSubscribeOpen(true)} cursor="pointer" /> - */} {detailsShown && (donationHistoryError ? ( 'Error fetching donation history' diff --git a/src/components/client/notifications/CampaignSubscribeModal.tsx b/src/components/client/notifications/CampaignSubscribeModal.tsx index aad2f0779..868776b56 100644 --- a/src/components/client/notifications/CampaignSubscribeModal.tsx +++ b/src/components/client/notifications/CampaignSubscribeModal.tsx @@ -1,23 +1,29 @@ +import React, { useState } from 'react' import * as yup from 'yup' -import { email } from 'common/form/validation' -import { useTranslation } from 'react-i18next' -import { useState } from 'react' +import { useTranslation, Trans } from 'react-i18next' +import { useMutation } from '@tanstack/react-query' +import { useSession } from 'next-auth/react' import { AxiosError, AxiosResponse } from 'axios' import { ApiError } from 'next/dist/server/api-utils' +import { useRouter } from 'next/router' import { AlertStore } from 'stores/AlertStore' import { useSubscribeToCampaign } from 'service/notification' import { CampaignResponse, CampaignSubscribeInput, CampaignSubscribeResponse } from 'gql/campaigns' -import { useMutation } from '@tanstack/react-query' -import { Dialog, DialogContent, DialogTitle, Grid } from '@mui/material' +import { Dialog, DialogContent, DialogTitle, Grid, Typography } from '@mui/material' +import EmailIcon from '@mui/icons-material/Email' +import ThumbUpIcon from '@mui/icons-material/ThumbUp' +import { styled } from '@mui/material/styles' import CloseModalButton from 'components/common/CloseModalButton' import GenericForm from 'components/common/form/GenericForm' -import { styled } from '@mui/material/styles' import SubmitButton from 'components/common/form/SubmitButton' import EmailField from 'components/common/form/EmailField' -import AcceptNewsLetterField from 'components/common/form/AcceptNewsletterField' -import { useSession } from 'next-auth/react' +import { email } from 'common/form/validation' +import { + AcceptNewsLetterField, + AcceptNewsLetterFieldCampaign, +} from 'components/common/form/AcceptNewsletterField' import { getCurrentPerson } from 'common/util/useCurrentPerson' -import React from 'react' +import { routes } from 'common/routes' const PREFIX = 'CampaignSubscribeModal' @@ -28,14 +34,7 @@ const classes = { const StyledGrid = styled(Grid)(({ theme }) => ({ [`& .${classes.subscribeBtn}`]: { fontSize: theme.typography.pxToRem(16), - background: `${theme.palette.secondary.main}`, - - '&:hover': { - background: theme.palette.primary.main, - }, - '& svg': { - color: '#ab2f26', - }, + background: `${theme.palette.primary}`, }, })) @@ -60,71 +59,62 @@ const validationSchema: yup.SchemaOf = yup export default function RenderCampaignSubscribeModal({ campaign, setOpen }: ModalProps) { const { t } = useTranslation() const { status } = useSession() - const [loading, setLoading] = useState(false) + + // When the backend is ready this useState should be deleted + + const [userEmail, setUserEmail] = useState('') const [isSuccess, setIsSuccess] = useState(false) + const [isGuest, setIsGuest] = useState(false) + const router = useRouter() const handleError = (e: AxiosError) => { const error = e.response?.data?.message AlertStore.show(error ? error : t('common:alerts.error'), 'error') } - const mutation = useMutation< - AxiosResponse, - AxiosError, - CampaignSubscribeInput - >({ - mutationFn: useSubscribeToCampaign(campaign.id), - onError: (error) => handleError(error), - onSuccess: () => { - AlertStore.show(t('common:alerts.message-sent'), 'success') - - setIsSuccess(true) - }, - }) + // When the backend is ready this mutation should be in force + + // const mutation = useMutation< + // AxiosResponse, + // AxiosError, + // CampaignSubscribeInput + // >({ + // mutationFn: useSubscribeToCampaign(campaign.id), + // onError: (error) => { + // console.log(error.message) + + // handleError(error)}, + // onSuccess: () => { + // AlertStore.show(t('common:alerts.message-sent'), 'success') + + // setIsSuccess(true) + // }, + // }) const handleClose = () => { setOpen(false) } - async function onSubmit(values: { email: string; consent: boolean }) { - setLoading(true) - try { - await mutation.mutateAsync(values) - } finally { - setLoading(false) - } - } + // When the backend is ready this onSubmit function should be in force - function AuthenticatedForm() { - const { data: user } = getCurrentPerson() + // async function onSubmit(values: { email: string; consent: boolean }) { + // setLoading(true) + // try { + // await mutation.mutateAsync(values) + // } finally { + // setLoading(false) + // } + // } - return ( - - - {/* Show consent checkbox if user has not provided it previously */} - {!user?.user?.newsletter && ( - - - - )} - - - - - - ) + // When the backend is ready this onSubmit function should be deleted + + const onSubmit = (values: { email: string; consent: boolean }) => { + setUserEmail(values.email) + setIsSuccess(true) } - function NonAuthenticatedForm() { + const NonAuthenticatedForm = () => { return ( - + + {' '} + {t('campaigns:subscribe.subscribe-campaign-subtTitle')} + - - + + + + + @@ -150,36 +146,131 @@ export default function RenderCampaignSubscribeModal({ campaign, setOpen }: Moda ) } - return ( - - - + const openAsGuest = () => { + setIsGuest(true) + } + + const { data: user } = getCurrentPerson() + + const sendOnProfileEmail = (status: string) => { + if (status !== 'authenticated') { + router.push(routes.login) + } + + // When the backend is ready this onSubmit function should be with real email and consent taken from the form + + onSubmit({ email: user?.user?.email || '', consent: user?.user?.newsletter || false }) + handleClose() + } + + if (!isGuest) { + return ( + + - - {!isSuccess ? ( + {t('campaigns:subscribe.subscribe-campaign-title')} - {status === 'authenticated' ? : } + + + + {' '} + {status !== 'authenticated' + ? t('campaigns:subscribe.subscribe-text-nonLoggedUser') + : t('campaigns:subscribe.subscribe-text-loggedUser')} + + + + sendOnProfileEmail(status)} + /> + openAsGuest()} + /> + + - ) : ( - - {status === 'authenticated' - ? t('campaigns:subscribe.confirm-subscribe') - : t('campaigns:subscribe.confirm-sent')} - - )} - - - ) + + + ) + } else { + return ( + + + + {!isSuccess ? ( + + + + {t('campaigns:subscribe.subscribe-campaign-title')} + + + + + + ) : ( + + + + + + + {t('campaigns:subscribe.confirm-subscribe')} + + + + + + + + )} + + + ) + } } diff --git a/src/components/client/notifications/SubscriptionPage.tsx b/src/components/client/notifications/SubscriptionPage.tsx index fe8afbe5c..35ac8c0dc 100644 --- a/src/components/client/notifications/SubscriptionPage.tsx +++ b/src/components/client/notifications/SubscriptionPage.tsx @@ -1,8 +1,10 @@ -import { useTranslation } from 'react-i18next' +import { useTranslation, Trans } from 'react-i18next' import Layout from '../layout/Layout' import PodkrepiLogo from 'components/common/brand/PodkrepiLogo' import { useRouter } from 'next/router' -import { Button, DialogContent, Grid } from '@mui/material' +import { Button, DialogTitle, Grid, Typography } from '@mui/material' +import ThumbUpIcon from '@mui/icons-material/ThumbUp' +import AnnouncementIcon from '@mui/icons-material/Announcement' import { styled } from '@mui/material/styles' import LinkButton from 'components/common/LinkButton' import React, { useEffect, useState } from 'react' @@ -147,26 +149,43 @@ export default function SubscriptionPage(data: Props) { {isSuccess ? ( - - - {t('notifications:subscribe.thank-you-msg')} - + + + + + {t('notifications:subscribe.thank-you-msg-heading')} + + + + + {t('notifications:subscribe.cta')} - {' '} + ) : ( - - - {t('notifications:subscribe.subscription-fail')} - + + + + + {t('notifications:subscribe.subscription-fail-heading')} + + + + + + ), }, @@ -110,7 +110,7 @@ export default function CampaignNewsGrid() { return ( ) @@ -126,7 +126,7 @@ export default function CampaignNewsGrid() { if (!params.row.editedAt) return '' return ( - + ) }, diff --git a/src/components/admin/campaigns/grid/BeneficiarySelect.tsx b/src/components/admin/campaigns/grid/BeneficiarySelect.tsx index 3a5c50643..79acfcb55 100644 --- a/src/components/admin/campaigns/grid/BeneficiarySelect.tsx +++ b/src/components/admin/campaigns/grid/BeneficiarySelect.tsx @@ -3,7 +3,7 @@ import { TranslatableField, translateError } from 'common/form/validation' import { useField } from 'formik' import { BeneficiaryListResponse } from 'gql/beneficiary' import { useState } from 'react' -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' import { useBeneficiariesList } from 'service/beneficiary' export default function BeneficiarySelect({ name = 'beneficiaryId' }) { diff --git a/src/components/admin/campaigns/grid/CampaignGrid.tsx b/src/components/admin/campaigns/grid/CampaignGrid.tsx index a04c07f87..6d2c7c993 100644 --- a/src/components/admin/campaigns/grid/CampaignGrid.tsx +++ b/src/components/admin/campaigns/grid/CampaignGrid.tsx @@ -227,7 +227,7 @@ export default function CampaignGrid() { renderCell: (cellValues: GridRenderCellParams) => ( ), @@ -240,7 +240,7 @@ export default function CampaignGrid() { headerAlign: 'left', renderCell: (cellValues: GridRenderCellParams) => ( - + ), }, @@ -253,7 +253,7 @@ export default function CampaignGrid() { renderCell: (cellValues: GridRenderCellParams) => ( ), @@ -267,7 +267,7 @@ export default function CampaignGrid() { renderCell: (cellValues: GridRenderCellParams) => ( ), diff --git a/src/components/admin/campaigns/grid/CoordinatorSelect.tsx b/src/components/admin/campaigns/grid/CoordinatorSelect.tsx index f6c906762..11629dd77 100644 --- a/src/components/admin/campaigns/grid/CoordinatorSelect.tsx +++ b/src/components/admin/campaigns/grid/CoordinatorSelect.tsx @@ -4,7 +4,7 @@ import { useCoordinatorsList } from 'common/hooks/coordinators' import { useField } from 'formik' import { CoordinatorResponse } from 'gql/coordinators' import { useState } from 'react' -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' export default function CoordinatorSelect({ name = 'coordinatorId' }) { const { t } = useTranslation() diff --git a/src/components/admin/campaigns/grid/OrganizerSelect.tsx b/src/components/admin/campaigns/grid/OrganizerSelect.tsx index e4fbb3c1c..dbcc7a14a 100644 --- a/src/components/admin/campaigns/grid/OrganizerSelect.tsx +++ b/src/components/admin/campaigns/grid/OrganizerSelect.tsx @@ -4,7 +4,7 @@ import { useOrganizersList } from 'common/hooks/organizer' import { useField } from 'formik' import { OrganizerResponse } from 'gql/organizer' import { useState } from 'react' -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' export default function OrganizerSelect({ name = 'organizerId', label = 'campaigns:organizer' }) { const { t } = useTranslation() diff --git a/src/components/admin/companies/CompanySelect.tsx b/src/components/admin/companies/CompanySelect.tsx index d4fe0b06d..8ef8d0cca 100644 --- a/src/components/admin/companies/CompanySelect.tsx +++ b/src/components/admin/companies/CompanySelect.tsx @@ -1,7 +1,7 @@ import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from '@mui/material' import { TranslatableField, translateError } from 'common/form/validation' import { useField } from 'formik' -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' import { useCompaniesList } from 'service/company' export default function CompanySelect({ name = 'companyId', label = '' }) { diff --git a/src/components/admin/documents/grid/DocumentSelect.tsx b/src/components/admin/documents/grid/DocumentSelect.tsx index 5f6f1ea84..cac7f4d7b 100644 --- a/src/components/admin/documents/grid/DocumentSelect.tsx +++ b/src/components/admin/documents/grid/DocumentSelect.tsx @@ -1,4 +1,4 @@ -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' import { FormControl, MenuItem } from '@mui/material' import { useField } from 'formik' diff --git a/src/components/admin/donations/grid/GridFilters.tsx b/src/components/admin/donations/grid/GridFilters.tsx index f40361b15..e3d7b9e7f 100644 --- a/src/components/admin/donations/grid/GridFilters.tsx +++ b/src/components/admin/donations/grid/GridFilters.tsx @@ -4,7 +4,7 @@ import { useStores } from '../../../../common/hooks/useStores' import { observer } from 'mobx-react' import { DonationStatus, PaymentProvider } from 'gql/donations.enums' import { DateTimePicker, enUS, LocalizationProvider } from '@mui/x-date-pickers' -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' import { bg } from 'date-fns/locale' import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns' import { fromMoney, toMoney } from 'common/util/money' @@ -48,7 +48,7 @@ export default observer(function GridFilters() { return ( - {formatDateString(row.row.createdAt, i18n.language)} + {formatDateString(row.row.createdAt, i18n?.language)} {row.row.message || row.row.comment} diff --git a/src/components/admin/partners/GiversAndGuarants.tsx b/src/components/admin/partners/GiversAndGuarants.tsx index 613a62b7b..c1e84dd58 100644 --- a/src/components/admin/partners/GiversAndGuarants.tsx +++ b/src/components/admin/partners/GiversAndGuarants.tsx @@ -1,7 +1,7 @@ import { Box, Container, Grid, Typography } from '@mui/material' import Image from 'next/image' import { Fragment } from 'react' -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' import { givers } from './helpers/giversData' import { data } from './helpers/guarantsData' import { Description, StyledGrid, Subtitle, Title } from './Partners.styled' diff --git a/src/components/admin/partners/PartnersContent.tsx b/src/components/admin/partners/PartnersContent.tsx index a3fb9a16a..b0c44ff00 100644 --- a/src/components/admin/partners/PartnersContent.tsx +++ b/src/components/admin/partners/PartnersContent.tsx @@ -2,7 +2,7 @@ import { Box, Container, Grid } from '@mui/material' import Image from 'next/image' import ExternalLink from 'components/common/ExternalLink' import { Fragment } from 'react' -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' import useMobile from '../../../common/hooks/useMobile' import { organizations, partners, techAndMarketingPartners } from './helpers/partnersData' import { SectionTitle, StyledGrid } from './Partners.styled' diff --git a/src/components/admin/recurring-donation/RecurringDonationStatusSelect.tsx b/src/components/admin/recurring-donation/RecurringDonationStatusSelect.tsx index a672cfc0f..4455bc85f 100644 --- a/src/components/admin/recurring-donation/RecurringDonationStatusSelect.tsx +++ b/src/components/admin/recurring-donation/RecurringDonationStatusSelect.tsx @@ -1,4 +1,4 @@ -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' import { FormControl, MenuItem } from '@mui/material' import { useField } from 'formik' import { RecurringDonationStatus } from 'gql/recurring-donation-status.d' diff --git a/src/components/admin/vaults/VaultSelect.tsx b/src/components/admin/vaults/VaultSelect.tsx index 7e4e5987c..2190699e7 100644 --- a/src/components/admin/vaults/VaultSelect.tsx +++ b/src/components/admin/vaults/VaultSelect.tsx @@ -1,4 +1,4 @@ -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' import { FormControl, MenuItem, TextFieldProps } from '@mui/material' import { useField, useFormikContext } from 'formik' diff --git a/src/components/client/about-project/sections/AboutPlatform/AboutPlatform.tsx b/src/components/client/about-project/sections/AboutPlatform/AboutPlatform.tsx index 160fe145d..2280ee254 100644 --- a/src/components/client/about-project/sections/AboutPlatform/AboutPlatform.tsx +++ b/src/components/client/about-project/sections/AboutPlatform/AboutPlatform.tsx @@ -19,7 +19,7 @@ export default function AboutPlatform() { {/* A11Y TODO: Render the svg without an so screenreaders can read it out */} Podkrepi infographic @@ -28,7 +28,7 @@ export default function AboutPlatform() { {/* A11Y TODO: Render the svg without an so screenreaders can read it out */} Podkrepi infographic diff --git a/src/components/client/auth/profile/DonationTable.tsx b/src/components/client/auth/profile/DonationTable.tsx index 432745e11..000672cc6 100644 --- a/src/components/client/auth/profile/DonationTable.tsx +++ b/src/components/client/auth/profile/DonationTable.tsx @@ -63,7 +63,7 @@ function DonationTable({ donations }: DonationTableProps) { ( - {getRelativeDate(cellValues.row.campaign?.endDate, i18n.language)} + {getRelativeDate(cellValues.row.campaign?.endDate, i18n?.language)} ), }, diff --git a/src/components/client/auth/profile/MyCampaignsTable.tsx b/src/components/client/auth/profile/MyCampaignsTable.tsx index 460d27091..0da8bbd4d 100644 --- a/src/components/client/auth/profile/MyCampaignsTable.tsx +++ b/src/components/client/auth/profile/MyCampaignsTable.tsx @@ -179,7 +179,7 @@ export default function MyCampaingsTable() { renderCell: (cellValues: GridRenderCellParams) => ( ), @@ -192,7 +192,7 @@ export default function MyCampaingsTable() { headerAlign: 'left', renderCell: (cellValues: GridRenderCellParams) => ( - + ), }, @@ -205,7 +205,7 @@ export default function MyCampaingsTable() { renderCell: (cellValues: GridRenderCellParams) => ( ), @@ -219,7 +219,7 @@ export default function MyCampaingsTable() { renderCell: (cellValues: GridRenderCellParams) => ( ), diff --git a/src/components/client/auth/profile/MyDonatedToCampaignsTable.tsx b/src/components/client/auth/profile/MyDonatedToCampaignsTable.tsx index 5ae4d8dd4..40c67550b 100644 --- a/src/components/client/auth/profile/MyDonatedToCampaignsTable.tsx +++ b/src/components/client/auth/profile/MyDonatedToCampaignsTable.tsx @@ -123,7 +123,7 @@ export default function MyDonatedToCampaignTable() { renderCell: (cellValues: GridRenderCellParams) => ( ), @@ -136,7 +136,7 @@ export default function MyDonatedToCampaignTable() { headerAlign: 'left', renderCell: (cellValues: GridRenderCellParams) => ( - + ), }, @@ -149,7 +149,7 @@ export default function MyDonatedToCampaignTable() { renderCell: (cellValues: GridRenderCellParams) => ( ), @@ -163,7 +163,7 @@ export default function MyDonatedToCampaignTable() { renderCell: (cellValues: GridRenderCellParams) => ( ), diff --git a/src/components/client/auth/profile/MyNotificationsCampaignConfirmModal.tsx b/src/components/client/auth/profile/MyNotificationsCampaignConfirmModal.tsx index e12b52203..4e580fe35 100644 --- a/src/components/client/auth/profile/MyNotificationsCampaignConfirmModal.tsx +++ b/src/components/client/auth/profile/MyNotificationsCampaignConfirmModal.tsx @@ -7,7 +7,7 @@ import { AxiosError, AxiosResponse } from 'axios' import { UNsubscribeEmailResponse, UNsubscribeEmailInput } from 'gql/notification' import { ApiError } from 'next/dist/server/api-utils' import { useState } from 'react' -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' import { useUNsubscribeEmail } from 'service/notification' import { AlertStore } from 'stores/AlertStore' import CloseModalButton from 'components/common/CloseModalButton' diff --git a/src/components/client/auth/profile/MyNotificationsConfirmModal.tsx b/src/components/client/auth/profile/MyNotificationsConfirmModal.tsx index 4623f5ace..8ce724ee5 100644 --- a/src/components/client/auth/profile/MyNotificationsConfirmModal.tsx +++ b/src/components/client/auth/profile/MyNotificationsConfirmModal.tsx @@ -11,7 +11,7 @@ import { import { ApiError } from 'next/dist/server/api-utils' import React from 'react' import { useState } from 'react' -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' import { useSubscribeEmail, useUNsubscribeEmail } from 'service/notification' import { AlertStore } from 'stores/AlertStore' import { styled } from '@mui/material/styles' diff --git a/src/components/client/auth/profile/MyNotificationsTab.tsx b/src/components/client/auth/profile/MyNotificationsTab.tsx index 56238b3a5..ff289d7bf 100644 --- a/src/components/client/auth/profile/MyNotificationsTab.tsx +++ b/src/components/client/auth/profile/MyNotificationsTab.tsx @@ -1,4 +1,4 @@ -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' import { styled } from '@mui/material/styles' import { Box, Button, Card, Typography } from '@mui/material' import { getCurrentPerson } from 'common/util/useCurrentPerson' diff --git a/src/components/client/auth/profile/PersonalInfoTab.tsx b/src/components/client/auth/profile/PersonalInfoTab.tsx index 1e1216c31..bfc495d74 100644 --- a/src/components/client/auth/profile/PersonalInfoTab.tsx +++ b/src/components/client/auth/profile/PersonalInfoTab.tsx @@ -187,7 +187,7 @@ export default function PersonalInfoTab() {

{t('profile:personalInfo.birthday')}

{person?.birthday - ? formatDateString(person?.birthday, i18n.language) + ? formatDateString(person?.birthday, i18n?.language) : t('profile:personalInfo.noBirthday')} diff --git a/src/components/client/blog/DateCreated.tsx b/src/components/client/blog/DateCreated.tsx index 4f5f1f8cb..4a6d9c8e0 100644 --- a/src/components/client/blog/DateCreated.tsx +++ b/src/components/client/blog/DateCreated.tsx @@ -1,6 +1,6 @@ import { Typography } from '@mui/material' import { grey } from '@mui/material/colors' -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' import { formatDateString } from 'common/util/date' @@ -13,7 +13,7 @@ export default function DateCreated({ createdAt, showLabel = false }: Props) { if (!createdAt) return null return ( - {showLabel && t('blog:created-on')} {formatDateString(createdAt, i18n.language)} + {showLabel && t('blog:created-on')} {formatDateString(createdAt, i18n?.language)} ) } diff --git a/src/components/client/blog/ReadingTime.tsx b/src/components/client/blog/ReadingTime.tsx index e273a9751..1613d26de 100644 --- a/src/components/client/blog/ReadingTime.tsx +++ b/src/components/client/blog/ReadingTime.tsx @@ -1,6 +1,6 @@ import { Typography } from '@mui/material' import { grey } from '@mui/material/colors' -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' type Props = { readingTime?: number diff --git a/src/components/client/campaign-news/CampaignNewsList.tsx b/src/components/client/campaign-news/CampaignNewsList.tsx index 89eee2989..63b7765f0 100644 --- a/src/components/client/campaign-news/CampaignNewsList.tsx +++ b/src/components/client/campaign-news/CampaignNewsList.tsx @@ -6,7 +6,7 @@ import { styled } from '@mui/material/styles' import { dateToTime, formatDateString } from 'common/util/date' import AvTimerIcon from '@mui/icons-material/AvTimer' import SupervisedUserCircleOutlinedIcon from '@mui/icons-material/SupervisedUserCircleOutlined' -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' import Image from 'next/image' import { GetArticleDocuments, GetArticleGalleryPhotos } from 'common/util/newsFilesUrls' @@ -108,8 +108,8 @@ export default function CampaignNewsList({ articles }: Props) { - {formatDateString(article.publishedAt, i18n.language)}   - {dateToTime(article.publishedAt, i18n.language)} + {formatDateString(article.publishedAt, i18n?.language)}   + {dateToTime(article.publishedAt, i18n?.language)} diff --git a/src/components/client/campaign-news/SingleArticlePage.tsx b/src/components/client/campaign-news/SingleArticlePage.tsx index 313d34204..6a6e904ac 100644 --- a/src/components/client/campaign-news/SingleArticlePage.tsx +++ b/src/components/client/campaign-news/SingleArticlePage.tsx @@ -4,7 +4,7 @@ import { styled } from '@mui/material/styles' import { formatDateString } from 'common/util/date' import AvTimerIcon from '@mui/icons-material/AvTimer' import SupervisedUserCircleOutlinedIcon from '@mui/icons-material/SupervisedUserCircleOutlined' -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' import Image from 'next/image' import { GetArticleDocuments, GetArticleGalleryPhotos } from 'common/util/newsFilesUrls' @@ -96,7 +96,7 @@ export default function SingleArticlePage({ slug }: Props) { - {formatDateString(article.publishedAt, i18n.language)} + {formatDateString(article.publishedAt, i18n?.language)} diff --git a/src/components/client/campaign-news/secured/NewsAdminPage.tsx b/src/components/client/campaign-news/secured/NewsAdminPage.tsx index ae1205df3..26cd475c0 100644 --- a/src/components/client/campaign-news/secured/NewsAdminPage.tsx +++ b/src/components/client/campaign-news/secured/NewsAdminPage.tsx @@ -5,7 +5,7 @@ import EditOutlinedIcon from '@mui/icons-material/EditOutlined' import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined' import PageviewOutlinedIcon from '@mui/icons-material/PageviewOutlined' import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid' -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' import { styled } from '@mui/material/styles' import { useState } from 'react' import { formatDateString } from 'common/util/date' @@ -85,7 +85,7 @@ export function NewsAdminPage({ slug, isAdmin }: Props) { flex: 1, minWidth: 140, renderCell: (params: GridRenderCellParams): React.ReactNode => { - return formatDateString(params.row.createdAt, i18n.language) + return formatDateString(params.row.createdAt, i18n?.language) }, }, { @@ -97,7 +97,7 @@ export function NewsAdminPage({ slug, isAdmin }: Props) { minWidth: 200, renderCell: (params: GridRenderCellParams): React.ReactNode => { const date: Date = params.row.publishedAt - return date ? formatDateString(date, i18n.language) : '' + return date ? formatDateString(date, i18n?.language) : '' }, }, { @@ -105,7 +105,7 @@ export function NewsAdminPage({ slug, isAdmin }: Props) { headerName: t('article.lastEdit'), headerClassName: classes.gridColumn, renderCell: (params: GridRenderCellParams): React.ReactNode => { - return params.row.editedAt ? formatDateString(params.row.editedAt, i18n.language) : '' + return params.row.editedAt ? formatDateString(params.row.editedAt, i18n?.language) : '' }, minWidth: 200, flex: 1, diff --git a/src/components/client/campaigns/CampaignCard/CampaignCard.tsx b/src/components/client/campaigns/CampaignCard/CampaignCard.tsx index 2409a19a9..529914cc9 100644 --- a/src/components/client/campaigns/CampaignCard/CampaignCard.tsx +++ b/src/components/client/campaigns/CampaignCard/CampaignCard.tsx @@ -75,14 +75,14 @@ export default function ActiveCampaignCard({ campaign, index }: Props) { - {i18n.language === 'bg' + {i18n?.language === 'bg' ? reachedAmount.split(',')[0] + ' лв.' : reachedAmount.split('.')[0]} - {i18n.language === 'bg' + {i18n?.language === 'bg' ? targetAmount.split(',')[0] + ' лв.' : targetAmount.split('.')[0]} diff --git a/src/components/client/campaigns/CampaignInfo/CampaignInfoStatus.tsx b/src/components/client/campaigns/CampaignInfo/CampaignInfoStatus.tsx index 94f8246e3..9a2a3566d 100644 --- a/src/components/client/campaigns/CampaignInfo/CampaignInfoStatus.tsx +++ b/src/components/client/campaigns/CampaignInfo/CampaignInfoStatus.tsx @@ -17,7 +17,7 @@ type Props = { export default function CampaignInfoStatus({ campaign, showExpensesLink }: Props) { const { t, i18n } = useTranslation() - const locale = i18n.language == 'bg' ? bg : enUS + const locale = i18n?.language == 'bg' ? bg : enUS return ( diff --git a/src/components/client/campaigns/CampaignNewsSection.tsx b/src/components/client/campaigns/CampaignNewsSection.tsx index 74c02fef6..4f1739629 100644 --- a/src/components/client/campaigns/CampaignNewsSection.tsx +++ b/src/components/client/campaigns/CampaignNewsSection.tsx @@ -197,9 +197,9 @@ export default function CampaignNewsSection({ campaign, canCreateArticle }: Prop - {`${formatDateString(article.publishedAt, i18n.language)} ${dateToTime( + {`${formatDateString(article.publishedAt, i18n?.language)} ${dateToTime( article.publishedAt, - i18n.language, + i18n?.language, )}`} @@ -226,9 +226,9 @@ export default function CampaignNewsSection({ campaign, canCreateArticle }: Prop - {`${formatDateString(article.publishedAt, i18n.language)} ${dateToTime( + {`${formatDateString(article.publishedAt, i18n?.language)} ${dateToTime( article.publishedAt, - i18n.language, + i18n?.language, )}`} diff --git a/src/components/client/campaigns/CampaignStateSelect.tsx b/src/components/client/campaigns/CampaignStateSelect.tsx index e30ba61b2..fda1f2ab2 100644 --- a/src/components/client/campaigns/CampaignStateSelect.tsx +++ b/src/components/client/campaigns/CampaignStateSelect.tsx @@ -1,7 +1,7 @@ import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from '@mui/material' import { TranslatableField, translateError } from 'common/form/validation' import { useField } from 'formik' -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' import { CampaignState } from './helpers/campaign.enums' export default function CampaignStateSelect({ name = 'state' }) { diff --git a/src/components/client/campaigns/CampaignTypeSelect.tsx b/src/components/client/campaigns/CampaignTypeSelect.tsx index 93ca73d4a..6d1fa2fb7 100644 --- a/src/components/client/campaigns/CampaignTypeSelect.tsx +++ b/src/components/client/campaigns/CampaignTypeSelect.tsx @@ -2,7 +2,7 @@ import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from '@mui/ import { TranslatableField, translateError } from 'common/form/validation' import { useCampaignTypesList } from 'common/hooks/campaigns' import { useField } from 'formik' -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' export default function CampaignTypeSelect({ name = 'campaignTypeId' }) { const { t } = useTranslation() diff --git a/src/components/client/campaigns/DonationWishes.tsx b/src/components/client/campaigns/DonationWishes.tsx index 197634018..3ccc021c9 100644 --- a/src/components/client/campaigns/DonationWishes.tsx +++ b/src/components/client/campaigns/DonationWishes.tsx @@ -37,7 +37,7 @@ type Props = { export default function DonationWishes({ campaignId, pageSize = 5 }: Props) { const { t, i18n } = useTranslation('campaigns') - const locale = i18n.language == 'bg' ? bg : enUS + const locale = i18n?.language == 'bg' ? bg : enUS const titleRef = useRef(null) const [pageIndex, setPageIndex] = useState(0) const [searchValue, setSearchValue] = useState('') diff --git a/src/components/client/campaigns/DonorsAndDonations.tsx b/src/components/client/campaigns/DonorsAndDonations.tsx index 8c4cfd58b..118a12574 100644 --- a/src/components/client/campaigns/DonorsAndDonations.tsx +++ b/src/components/client/campaigns/DonorsAndDonations.tsx @@ -101,7 +101,7 @@ export default function DonorsAndDonations({ | {formatDistanceStrict(parseISO(createdAt), new Date(), { - locale: i18n.language == 'bg' ? bg : enUS, + locale: i18n?.language == 'bg' ? bg : enUS, addSuffix: true, })} diff --git a/src/components/client/campaigns/InlineDonation.tsx b/src/components/client/campaigns/InlineDonation.tsx index 890cc1f54..4740b76cd 100644 --- a/src/components/client/campaigns/InlineDonation.tsx +++ b/src/components/client/campaigns/InlineDonation.tsx @@ -6,7 +6,7 @@ import { useRouter } from 'next/router' import { CampaignResponse } from 'gql/campaigns' import { Button, CircularProgress, Grid, IconButton, Menu, Typography } from '@mui/material' -import { AddLinkOutlined, Favorite, MarkEmailUnread } from '@mui/icons-material' +import { AddLinkOutlined, Favorite } from '@mui/icons-material' import { lighten } from '@mui/material/styles' import { styled } from '@mui/material/styles' import ExpandLessIcon from '@mui/icons-material/ExpandLess' @@ -253,25 +253,25 @@ export default function InlineDonation({ campaign }: Props) { - {i18n.language === 'bg' ? reachedAmount.split(',')[0] : reachedAmount.split('.')[0]} + {i18n?.language === 'bg' ? reachedAmount.split(',')[0] : reachedAmount.split('.')[0]} - {i18n.language === 'bg' + {i18n?.language === 'bg' ? reachedAmount.split(',')[1].substring(0, 2) : reachedAmount.split('.')[1]} - {i18n.language === 'bg' ? {t('donations.lv')} : ''} + {i18n?.language === 'bg' ? {t('donations.lv')} : ''} - {i18n.language === 'bg' ? targetAmount.split(',')[0] : targetAmount.split('.')[0]} + {i18n?.language === 'bg' ? targetAmount.split(',')[0] : targetAmount.split('.')[0]} - {i18n.language === 'bg' + {i18n?.language === 'bg' ? targetAmount.split(',')[1].substring(0, 2) : targetAmount.split('.')[1]} - {i18n.language === 'bg' ? {t('donations.lv')} : ''} + {i18n?.language === 'bg' ? {t('donations.lv')} : ''} diff --git a/src/components/client/faq/FaqSearch.tsx b/src/components/client/faq/FaqSearch.tsx index 732f8f904..dead11564 100644 --- a/src/components/client/faq/FaqSearch.tsx +++ b/src/components/client/faq/FaqSearch.tsx @@ -1,7 +1,7 @@ import React from 'react' import { Box, InputAdornment, TextField } from '@mui/material' import SearchIcon from '@mui/icons-material/Search' -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' type Props = { onChange: (newValue: string) => void diff --git a/src/components/client/faq/VerticalTabs.tsx b/src/components/client/faq/VerticalTabs.tsx index 3d0cd82e9..b61bfbde4 100644 --- a/src/components/client/faq/VerticalTabs.tsx +++ b/src/components/client/faq/VerticalTabs.tsx @@ -4,7 +4,7 @@ import { TabList } from '@mui/lab' import Box from '@mui/material/Box' import { useRouter } from 'next/router' import { FaqCategory } from './contents/faq-categories.enum' -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' type Props = { faqCategories: FaqCategory[] diff --git a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx index 26969ddbc..b61e1dd9a 100644 --- a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx +++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx @@ -60,14 +60,14 @@ export default function ActiveCampaignCard({ campaign, index }: Props) { - {i18n.language === 'bg' + {i18n?.language === 'bg' ? reachedAmount.split(',')[0] + ' лв.' : reachedAmount.split('.')[0]} - {i18n.language === 'bg' + {i18n?.language === 'bg' ? targetAmount.split(',')[0] + ' лв.' : targetAmount.split('.')[0]} diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx index cd58e21ec..b25e803c2 100644 --- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx @@ -64,7 +64,7 @@ export default function CompletedCampaignsSection() { - {i18n.language === 'bg' + {i18n?.language === 'bg' ? moneyPublic(campaign.summary.reachedAmount).split(',')[0] + ' лв.' : moneyPublic(campaign.summary.reachedAmount).split('.')[0]} diff --git a/src/components/client/index/sections/HowWeWorkSection/HowWeWorkSection.tsx b/src/components/client/index/sections/HowWeWorkSection/HowWeWorkSection.tsx index 4dc72926f..b8f2a2e49 100644 --- a/src/components/client/index/sections/HowWeWorkSection/HowWeWorkSection.tsx +++ b/src/components/client/index/sections/HowWeWorkSection/HowWeWorkSection.tsx @@ -11,8 +11,8 @@ import { Heading, InfoText } from 'components/client/index/IndexPage.styled' export default function HowWeWorkSection() { const { t, i18n } = useTranslation('index') - const mobileInfographicPath = `/infographic-${i18n.language}-mobile.svg` - const desktopInfographicPath = `/infographic-${i18n.language}.svg` + const mobileInfographicPath = `/infographic-${i18n?.language}-mobile.svg` + const desktopInfographicPath = `/infographic-${i18n?.language}.svg` return ( diff --git a/src/components/client/irregularity/helpers/IrregularityReasonSelect.tsx b/src/components/client/irregularity/helpers/IrregularityReasonSelect.tsx index e10c1868d..2ff8193b5 100644 --- a/src/components/client/irregularity/helpers/IrregularityReasonSelect.tsx +++ b/src/components/client/irregularity/helpers/IrregularityReasonSelect.tsx @@ -1,4 +1,4 @@ -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' import { useField, useFormikContext } from 'formik' import { MenuItem, TextField } from '@mui/material' diff --git a/src/components/client/irregularity/helpers/NotifierTypeSelect.tsx b/src/components/client/irregularity/helpers/NotifierTypeSelect.tsx index daa8a59b9..14aafe6f9 100644 --- a/src/components/client/irregularity/helpers/NotifierTypeSelect.tsx +++ b/src/components/client/irregularity/helpers/NotifierTypeSelect.tsx @@ -1,4 +1,4 @@ -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' import { MenuItem, TextField } from '@mui/material' import { useField, useFormikContext } from 'formik' diff --git a/src/components/client/irregularity/helpers/StatusSelect.tsx b/src/components/client/irregularity/helpers/StatusSelect.tsx index d2b7c18bf..fcd8f8dbc 100644 --- a/src/components/client/irregularity/helpers/StatusSelect.tsx +++ b/src/components/client/irregularity/helpers/StatusSelect.tsx @@ -1,4 +1,4 @@ -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' import { useField, useFormikContext } from 'formik' import { MenuItem, TextField } from '@mui/material' diff --git a/src/components/client/layout/Footer/LogoSocialIcons.tsx b/src/components/client/layout/Footer/LogoSocialIcons.tsx index 376610c78..5460efe7b 100644 --- a/src/components/client/layout/Footer/LogoSocialIcons.tsx +++ b/src/components/client/layout/Footer/LogoSocialIcons.tsx @@ -1,6 +1,6 @@ import Link from 'next/link' import { useRouter } from 'next/router' -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' import { Grid } from '@mui/material' import { routes } from 'common/routes' diff --git a/src/components/client/layout/Footer/SubscribeBtn.tsx b/src/components/client/layout/Footer/SubscribeBtn.tsx index 65bee5a63..7529033fb 100644 --- a/src/components/client/layout/Footer/SubscribeBtn.tsx +++ b/src/components/client/layout/Footer/SubscribeBtn.tsx @@ -1,5 +1,5 @@ import { Typography } from '@mui/material' -import { useTranslation } from 'react-i18next' +import { useTranslation } from 'next-i18next' import { SubscribeLinkWrapper } from './Footer.styled' import { useState } from 'react' import RenderSubscribeModal from 'components/client/notifications/GeneralSubscribeModal' diff --git a/src/components/client/layout/Layout.tsx b/src/components/client/layout/Layout.tsx index fbb64ebf8..564145045 100644 --- a/src/components/client/layout/Layout.tsx +++ b/src/components/client/layout/Layout.tsx @@ -89,7 +89,7 @@ export default function Layout({ )} - + {/* TODO: think of how to make campaign level localization */} @@ -106,8 +106,11 @@ export default function Layout({