New design notifications news

README.md

@@ -100,7 +100,9 @@ Watch releases of this repository to be notified about future updates:
 ## Contributors ✨
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-76-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 Please check [contributors guide](https://github.com/podkrepi-bg/frontend/blob/master/CONTRIBUTING.md) for:

next.config.js

@@ -53,8 +53,8 @@ const moduleExports = {
       },
       {
         source: '/robots.txt',
-        destination: '/api/robots'
-      }
+        destination: '/api/robots',
+      },
     ]
   },
   async redirects() {

public/locales/bg/auth.json

@@ -12,13 +12,15 @@
   },
   "cta": {
     "login": "Вход",
+    "guest": "Като гост",
     "logout": "Изход",
     "register": "Регистрация",
     "send": "Изпрати",
     "reset": "Смени"
   },
   "fields": {
     "email": "Email",
+    "email-descriptive": "Въведи email адрес",
     "password": "Парола",
     "confirm-password": "Потвърждение на парола",
     "first-name": "Име",

public/locales/bg/campaigns.json

@@ -73,7 +73,14 @@
     "save": "Запази",
     "submit": "Изпрати",
     "apply": "Кандидатствайте",
-    "subscribe": "Абониране за известия",
+    "subscribe": "Абонирай се за email известия за кампанията",
+    "subscribeFooter": "Абонирай се за бюлетина",
+    "subscribeGeneral": "Абонирайте се за email известия от Подкрепи.бг",
+    "subscribe-monthly-newsletter": "Месечен бюлтеин на Подкрепи.бг",
+    "subscribeGeneralSubtext": "Получавайте нашия месечен бюлетин, в който ще Ви информираме за най-интересните новини от Подкрепи.бг!",
+    "subscribe-general-monthly-newsletter": "Получавайте нашия месечен бюлетин, за да сте в час най-интересните новини от Подкрепи.бг!",
+    "subscribeGeneralButton": "Абонирайте се за новини",
+    "subscribe-general-newsletter-button": "Абонирайте се",
     "support": "Дарете",
     "support-cause-today": "Подкрепете кауза днес!",
     "support-now": "Подкрепете сега",
@@ -95,10 +102,18 @@
     "allow-donation-on-complete": "Разрешете дарения след достигане на сумата"
   },
   "subscribe": {
-    "confirm-sent": "Благодарим ви! На посочения e-mail адрес беше изпратено съобщение за потвърждение на вашето абониране.",
-    "confirm-subscribe": "Благодарим ви! Абонирахте се успешно.",
-    "subscribe-title": "Абониране за известия и новини от Podkrepi.bg",
-    "subscribe-campaign-title": "Абониране за известия по тази кампания"
+    "confirm-sent": "Моля, <strong>активирай</strong> абонамента си от email-a, който ти изпратихме на {{email}}",
+    "confirm-subscribe": "Записа се успешно.",
+    "subscribe-title": "Абониране за новините на Подкрепи.бг",
+    "subscribe-campaign-title": "Абониране за новините по кампанията",
+    "subscribe-text-nonLoggedUser": "Моля, продължи като гост и въведи email адреса, на който желаеш да получаваш известия за тази кампания, или влез в профила си. Вписвайки се с потребителското си име и парола, ще можеш да управляваш абонамента си от своя Личен профил.",
+    "subscribe-text-nonLoggedUser-general": "Моля, продължи като гост и въведи email адреса, на който желаеш да получаваш известия от нас, или влез в профила си. Вписвайки се с потребителското си име и парола, ще можеш да управляваш абонамента си от своя Личен профил.",
+    "subscribe-text-loggedUser": "Моля, избери дали желаеш да получаваш новините за кампанията на email адреса, асоцииран с профила ти, или на алтернативен адрес:",
+    "subscribe-subtitle": "Искам да получавам новини и известия от Подкрепи.бг на този email адрес:",
+    "subscribe-campaign-subtTitle": "Искам да получавам новини за кампанията на този email адрес:",
+    "subscribe-button": "Запиши ме",
+    "profile-button": "На профилния",
+    "another-button": "На друг"
   },
   "campaign": {
     "subheading": "Вашата подкрепа променя света и има значение. Всички подкрепящи чрез Подкрепи.бг са наши партньори в подпомагането на кампании за общността. Като щедър дарител Вие ставате важен партньор в подпомагането на кампания за нечие здраве или за успеха на кауза, която ви е близка до сърцето.",

public/locales/bg/index.json

@@ -10,6 +10,10 @@
     "content": "Подкрепи.бг представлява общност от специалисти в областта на програмирането, правото, маркетинга, дизайна, медицината, финансите, социалното предприемачество и др. Обединени сме от целта да създадем устойчива и прозрачна платформа за дарения, която подкрепя каузи и хора в нужда, като заедно с това популяризира и връща доверието към дарителството в България.",
     "meet-our-team": "Запознайте се с екипа ни"
   },
+  "subscription-section": {
+    "heading": "Искаш да си в час с бъдещите ни постижения?",
+    "content": "Абонирай се за нашия бюлетин и ние ще те информираме за най-важното от живота на Подкрепи.бг. Всеки месец ще получваш email от нас, в който ще ти споделяме най-интересното за кампаниите, които поддържаме, както и за техните организатори и бенефициенти. Ще получаваш новините за нашите партньори, доброволци и дарители в електронната си пощенска кутия. Ако ти звучи добре, запиши се, като въведеш email адреса си тук:"
+  },
   "support-us-section": {
     "heading": "Подкрепете ни като:",
     "financial-support": "- дарител",

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": "Опитай пак"
   },

public/locales/bg/profile.json

@@ -56,7 +56,6 @@
       "refund": "възстановено",
       "cancelled": "отменено",
       "guaranteed": "гарантирано"
-
     }
   },
   "certificates-history": {

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": "политиката за защита на личните данни",

public/locales/en/auth.json

@@ -11,13 +11,15 @@
   },
   "cta": {
     "login": "Login",
+    "guest": "As guest",
     "logout": "Logout",
     "register": "Register",
     "send": "Send",
     "reset": "Reset"
   },
   "fields": {
     "email": "Email",
+    "email-descriptive": "Fill in your email",
     "password": "Password",
     "confirm-password": "Confirm Password",
     "first-name": "First name",

public/locales/en/campaigns.json

@@ -74,6 +74,14 @@
     "save": "Save",
     "submit": "Submit",
     "apply": "Apply",
+    "subscribe": "Subscribe for email notifications for the campaign",
+    "subscribeFooter": "Subscribe for the newsletter",
+    "subscribeGeneral": "Subscribe for email notifications from Podkrepi.bg",
+    "subscribe-monthly-newsletter": "Monthly newsletter of Podkrepi.bg",
+    "subscribeGeneralSubtext": "Receive our monthly newsletter which will inform you about the most interesting news from Podkrepi.bg!!",
+    "subscribe-general-monthly-newsletter": "Receive our monthly newsletter so that you are aware of the most interesting news from Podkrepi.bg!",
+    "subscribeGeneralButton": "Subscribe for news",
+    "subscribe-general-newsletter-button": "Subscribe",
     "support": "Donate",
     "support-cause-today": "Support a campaign today!",
     "support-now": "Support now",
@@ -93,6 +101,20 @@
     "attached-files": "Attached files",
     "download": "Download"
   },
+  "subscribe": {
+    "confirm-sent": "Please, <bold>activate</bold> your subscription from the email that we sent to {{email}}",
+    "confirm-subscribe": "You subscribed successfully",
+    "subscribe-title": "Subscribe for news from Podkrepi.bg",
+    "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-nonLoggedUser-general": "Please, proceed as a guest and write down your email, on which you want to receive notifications from us 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-subtitle": "I want to receive news and notifications from Podkrepi.bg on this email:",
+    "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",

public/locales/en/index.json

@@ -10,6 +10,10 @@
     "content": "Podkrepi.bg is a community of specialists in the field of programming, law, marketing, design, medicine, finance, social entrepreneurship and others. We are united by the goal of creating a sustainable and transparent donation platform that supports causes and people in need, while promoting and restoring trust in donations in Bulgaria.",
     "meet-our-team": "Meet our team"
   },
+  "subscription-section": {
+    "heading": "You want to know about our future achievements?",
+    "content": "Subscribe for our newsletter we will infrom you about the most important from the life of Podkrepi.bg. Every month you will receive email from us in which we will share with you the most important things about the campaigns that we have and their organizers and beneficiaries. You will receive news for our partners, volunteers and donors in your email box. If this sounds good for you, subscribe as you fill in your email here:"
+  },
   "support-us-section": {
     "heading": "Support us as:",
     "financial-support": "- a benefactor",

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"
+  }
+}

public/locales/en/validation.json

@@ -16,6 +16,8 @@
   "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": "I agree to receive news",
+  "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",

src/components/client/auth/register/CorporateRegisterForm.tsx

@@ -9,7 +9,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'
 
 import { AccountType } from 'gql/user-registration'
 import { validateEIK13, validateEIK9 } from 'components/common/validations/EIKValidator'

src/components/client/auth/register/RegisterForm.tsx

@@ -9,7 +9,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'
 
 import { AccountType } from 'gql/user-registration'
 import { IndividualRegisterFormData } from 'gql/user-registration'

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'
@@ -26,6 +26,8 @@ import { routes } from 'common/routes'
 import { useCanEditCampaign } from 'common/hooks/campaigns'
 import { moneyPublic } from 'common/util/money'
 import CampaignPublicExpensesChart from './CampaignPublicExpensesChart'
+import EmailIcon from '@mui/icons-material/Email'
+import RenderCampaignSubscribeModal from '../notifications/CampaignSubscribeModal'
 
 const ReactQuill = dynamic(() => import('react-quill'), { ssr: false })
 const CampaignNewsSection = dynamic(() => import('./CampaignNewsSection'), { ssr: false })
@@ -37,6 +39,7 @@ const classes = {
   campaignTitle: `${PREFIX}-campaignTitle`,
   linkButton: `${PREFIX}-linkButton`,
   securityIcon: `${PREFIX}-securityIcon`,
+  subscribeLink: `${PREFIX}-subscribe`,
   financeSummary: `${PREFIX}-financeSummary`,
 }
 
@@ -93,7 +96,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',
+    },
+  },
   [`& .${classes.financeSummary}`]: {
     fontSize: `1.2rem`,
     [theme.breakpoints.up('sm')]: {
@@ -109,6 +123,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)
@@ -124,7 +139,22 @@ export default function CampaignDetails({ campaign }: Props) {
         showExpensesLink={(expensesList && expensesList?.length > 0) || canEditCampaign}
       />
       <Grid container spacing={8}>
-        <Grid item xs={12}>
+        {subscribeIsOpen && (
+          <RenderCampaignSubscribeModal setOpen={setSubscribeOpen} campaign={campaign} />
+        )}
+        <Grid item xs={12} display="flex" sx={{ mt: 1.5 }}>
+          <EmailIcon
+            color="primary"
+            fontSize="small"
+            sx={{ mr: 0.5 }}
+            onClick={() => setSubscribeOpen(true)}
+            cursor="pointer"
+          />
+          <Typography onClick={() => setSubscribeOpen(true)} className={classes.subscribeLink}>
+            {t('campaigns:cta.subscribe')}
+          </Typography>
+        </Grid>
+        <Grid item xs={12} style={{ paddingTop: '20px' }}>
           <ReactQuill readOnly theme="bubble" value={campaign.description} />
         </Grid>
         <Grid item xs={12}>
@@ -172,6 +202,21 @@ export default function CampaignDetails({ campaign }: Props) {
           )}
         </Grid>
         <CampaignNewsSection campaign={campaign} canCreateArticle={canEditCampaign} />
+        {subscribeIsOpen && (
+          <RenderCampaignSubscribeModal setOpen={setSubscribeOpen} campaign={campaign} />
+        )}
+        <Grid item xs={12} display="flex" mt={2} mb={2}>
+          <EmailIcon
+            color="primary"
+            fontSize="small"
+            sx={{ mr: 0.5 }}
+            onClick={() => setSubscribeOpen(true)}
+            cursor="pointer"
+          />
+          <Typography onClick={() => setSubscribeOpen(true)} className={classes.subscribeLink}>
+            {t('campaigns:cta.subscribe')}
+          </Typography>
+        </Grid>
         <Grid item xs={12} id="wishes">
           <DonationWishes campaignId={campaign?.id} />
         </Grid>