{children}
\n}\n","export const breakpoints = {\n mobile: `(max-width: ${'760px'})`,\n tablet: `(max-width: ${'1024px'})`,\n laptop: `(max-width: ${'1280px'})`,\n laptopL: `(max-width: ${'1440px'})`,\n desktop: `(max-width: ${'1560px'})`,\n desktopL: `(max-width: ${'1920px'})`,\n}\n","import styled from 'styled-components'\nimport { breakpoints } from '~/helper/breakpoints'\n\nexport const Footer = styled.footer`\n width: 100vw;\n background: rgba(22, 22, 24);\n font-family: 'Catamaran' !important;\n\n background-image: linear-gradient(\n 125deg,\n hsl(240deg 4% 9%) 2%,\n hsl(219deg 37% 15%) 23%,\n hsl(217deg 40% 16%) 37%,\n hsl(217deg 40% 16%) 51%,\n hsl(219deg 37% 15%) 67%,\n hsl(240deg 4% 9%) 95%\n );\n padding: 3.5rem 12rem;\n position: relative;\n display: flex;\n justify-content: center;\n\n @media ${breakpoints.laptopL} {\n padding: 3.5rem 8rem;\n }\n\n @media ${breakpoints.mobile} {\n padding: 1.125rem 1.5rem;\n }\n`\n\nexport const Content = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n max-width: 100rem;\n gap: 2.5rem;\n\n @media ${breakpoints.mobile} {\n gap: 0.5rem;\n flex-direction: column;\n }\n`\n\nexport const AbilityaContainer = styled.div`\n display: flex;\n flex-direction: column;\n height: 100%;\n gap: 2rem;\n\n @media ${breakpoints.mobile} {\n gap: 1rem;\n width: 100%;\n\n .desktop-footer {\n display: none;\n }\n }\n\n h4 {\n color: #aaacb1;\n font-size: 0.75rem;\n font-weight: 400;\n }\n`\n\nexport const AbilityaInfo = styled.div`\n width: 100%;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n margin-top: 0.5rem;\n\n div {\n padding-bottom: 0.75rem;\n width: 13.3rem;\n }\n\n p {\n color: #aaacb1;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n }\n\n strong {\n font-weight: 700;\n }\n\n @media ${breakpoints.tablet} {\n display: flex;\n align-items: flex-end;\n }\n\n @media ${breakpoints.mobile} {\n display: flex;\n align-items: flex-start;\n }\n`\n\nexport const LogoInfos = styled.div`\n display: flex;\n align-items: center;\n gap: 1.5rem;\n`\n\nexport const LinksContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: end;\n align-items: start;\n flex: 1;\n gap: 4rem;\n\n h4,\n h3 {\n color: #eff0f4;\n font-size: 1.125rem;\n font-weight: 700;\n margin-bottom: 0 !important;\n cursor: pointer;\n }\n\n a {\n text-decoration: none !important;\n color: #55555b;\n margin-bottom: 0 !important;\n\n &:hover {\n color: #55555b;\n }\n }\n\n @media ${breakpoints.tablet} {\n display: none;\n }\n`\n\nexport const LinksList = styled.ul`\n display: flex;\n flex-direction: column;\n list-style-type: none;\n\n h4,\n a,\n p {\n margin-top: 0.3rem !important;\n color: #aaacb1;\n font-size: 16px;\n font-weight: 500;\n margin-bottom: 0 !important;\n cursor: pointer;\n }\n`\n","import React from 'react'\nimport { LinkToSection } from '../../pages/LandingPage/Components/Link/link'\nimport * as S from './styled'\n\nconst Footer = () => {\n return (\n![\"SOS](\"/images/sos-logo-white.svg\"){kind=logo}
\n ![\"Powered](\"/images/powered-logo-white.svg\"){kind=logo}
\n {`Copyright ${new Date().getFullYear()} - All rights reserved`}
\nAbilitya
\n \n\nAbout us
\n\n \nCases
\n \n\n\n
\n \n ABILITYA INTERNATIONAL Sagl\n
\nVia Canova 9 - 6900 Lugano - Switzerland info@abilytia.tech
\n\n
\n \n ABILITYA S.R.L\n
\nVia Antonio Baldissera 2, 20129 Milan - Italy info@abilitya.tech
\n{`Copyright ${new Date().getFullYear()} - All rights reserved`}
\n\n \n \n\n \n
\n\n Ongoing campaigns\n \n \n \n\n \n
\n\n from past campaigns\n\n \n \n \n\n \n \n \n
\n \n \n
\n )\n }\n}\n","import styled from 'styled-components'\n\nexport const Container = styled.div`\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &.size-sm {\n width: 28px;\n height: 28px;\n }\n\n &.size-40 {\n width: 40px;\n height: 40px;\n border-radius: 20px;\n }\n\n &.size-md {\n width: 44px;\n height: 44px;\n }\n\n &.size-lg {\n width: 64px;\n height: 64px;\n }\n`\n\nexport const InitialsContainer = styled.div`\n background-color: #000;\n width: 100%;\n height: 100%;\n min-height: 28px;\n min-width: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50px;\n font-size: 10px;\n line-height: 10px;\n color: #fff;\n font-weight: bold;\n\n &.size-sm {\n font-size: 13px;\n line-height: 13px;\n }\n\n &.size-40 {\n font-size: 17px;\n line-height: 17px;\n }\n\n &.size-md {\n font-size: 17px;\n line-height: 17px;\n }\n\n &.size-lg {\n font-size: 20px;\n line-height: 20px;\n }\n`\n\nexport const UserAvatar = styled.img`\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n\n &.size-sm {\n width: 28px;\n height: 28px;\n border-radius: 14px;\n }\n\n &.size-40 {\n width: 40px;\n height: 40px;\n border-radius: 20px;\n }\n\n &.size-md {\n width: 44px;\n height: 44px;\n border-radius: 22px;\n }\n\n &.size-lg {\n width: 64px;\n height: 64px;\n border-radius: 32px;\n }\n`\n","import React, { useState } from 'react'\nimport { useSelector } from 'react-redux'\nimport ShouldRender from '~/components/ShouldRender'\nimport * as S from './styled'\n\nconst Avatar = ({ userId, name, onPress, size, image }) => {\n const { users } = useSelector(state => state.firebaseUsers)\n const index = users && users.findIndex(x => x.id === userId)\n const [error, setError] = useState(false)\n\n const getInitials = () => {\n if (!name) {\n return 'UN'\n }\n\n const parts = name && name.trim().split(' ')\n\n const initials =\n parts.length > 1 ? `${parts[0].substr(0, 1)}${parts[parts.length - 1].substr(0, 1)}` : parts[0].substr(0, 2)\n\n return initials.toUpperCase()\n }\n\n return (\n \n {item.title} \n \n \n
\n {`- ${item && item.titleCaption}`}
\n {item.description}
\n {item.timeAgo}
\n {data.map((item, index) => item && renderItem({ item, index }))}
\n ) : (\n \n \n
\n \n {fileExtension && Object.prototype.hasOwnProperty.call(icons, fileExtension) ? icons[fileExtension] : icons.na}\n
\n )\n}\n\nexport default FileIcons\n","import styled from 'styled-components'\n\nexport const FileContainer = styled.div`\n display: ${props => (props.hasAdditionalTextMessage ? 'initial' : 'flex')};\n align-items: center;\n color: #fff;\n font-family: 'Roboto', sans-serif;\n font-size: 12px;\n text-decoration: none;\n\n & a {\n text-decoration: none;\n color: #fff;\n }\n`\n\nexport const FileIconsContainer = styled.div`\n display: flex;\n padding: 5px;\n border-radius: 5px;\n height: 45px;\n padding-left: 10px;\n padding-right: 10px;\n align-items: center;\n text-decoration: none;\n background-color: rgba(0, 0, 0, 0.3);\n`\n\nexport const FileInformations = styled.div`\n display: flex;\n padding-left: 10px;\n`\n\nexport const FileDetails = styled.p`\n font-size: 10px;\n margin-bottom: 0px;\n`\n\nexport const FileName = styled.div`\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n margin-left: 6px;\n`\n","/* eslint-disable react/jsx-no-target-blank */\nimport React from 'react'\nimport { truncate } from 'lodash'\nimport FileIcons from '~/components/Chat/FileIcons'\nimport * as S from './styled'\n\nconst FilePreview = ({ fileName, fileUrl, isReply, fileSize, fileExtension, hasAdditionalTextMessage }) => {\n return (\n \n {phrase?.text}\n
\n )\n }\n\n return phrases.map((phrase, index) => {\n return messageFormat(phrase, index)\n })\n }\n\n return (\n \n {message.userData?.name} \n {`- ${getWhenTheMessageWasSended(message.createdAt)}`} \n
\n \n {fileExtension && Object.prototype.hasOwnProperty.call(icons, fileExtension) ? icons[fileExtension] : icons.na}\n
\n )\n}\n\nexport default InputPreviewFileIcons\n","/* eslint-disable import/no-named-default */\n/* eslint-disable react/destructuring-assignment */\n/* eslint-disable react/forbid-prop-types */\n/* eslint-disable react/require-default-props */\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { useTranslation } from 'react-i18next'\nimport { default as ReactSelect } from 'react-select'\nimport i18n from '~/i18n'\n\nconst MultiSelect = props => {\n const { t } = useTranslation()\n\n if (props.allowSelectAll) {\n return (\n \n {customFormatInfo?.name ?? name} \n {customFormatInfo?.description ?? description} \n
\n \n \n \n \n {t('campaignRating')} \n \n \n \n \n \n \n \n {t('pleaseRateYourCampaignWith')}\n Runners world\n \n {t('considerOneStarRating')}\n \n \n setRating(e.target.value)}\n />\n \n \n \n \n \n \n \n \n
\n )\n}\n","import { useMemo } from 'react'\nimport { useDispatch } from 'react-redux'\nimport {\n setCurrentCampaignForReviewPage as setCurrentCampaignForReviewPageAction,\n setShowCampaignReviewPage as setShowCampaignReviewPageAction,\n setCampaignsWaitingForApprovalLength as setCampaignsWaitingForApprovalLengthAction,\n openInformationModalAfterFormatCreation as openInformationModalAfterFormatCreationAction,\n closeInformationModalAfterFormatCreation as closeInformationModalAfterFormatCreationAction,\n setCommunitySponsorDirectChannelId as setCommunitySponsorDirectChannelIdAction,\n setCampaignDatesForCurrentMonth as setCampaignDatesForCurrentMonthAction,\n} from '~/store/modules/createCampaign/actions'\n\nconst useCampaignFunctions = () => {\n const dispatch = useDispatch()\n const actions = useMemo(\n () => ({\n setCurrentCampaignForReviewPageAction(campaign) {\n dispatch(setCurrentCampaignForReviewPageAction(campaign))\n },\n setShowCampaignReviewPageAction(status) {\n dispatch(setShowCampaignReviewPageAction(status))\n },\n setCampaignsWaitingForApprovalLengthAction(length) {\n dispatch(setCampaignsWaitingForApprovalLengthAction(length))\n },\n openInformationModalAfterFormatCreationAction() {\n dispatch(openInformationModalAfterFormatCreationAction())\n },\n closeInformationModalAfterFormatCreationAction() {\n dispatch(closeInformationModalAfterFormatCreationAction())\n },\n setCommunitySponsorDirectChannelIdAction(channelId) {\n dispatch(setCommunitySponsorDirectChannelIdAction(channelId))\n },\n setCampaignDatesForCurrentMonthAction(startDate, endDate) {\n dispatch(setCampaignDatesForCurrentMonthAction(startDate, endDate))\n },\n }),\n [dispatch],\n )\n return actions\n}\n\nexport default useCampaignFunctions\n","import styled from 'styled-components'\n\nexport const CardBody = styled.div`\n display: flex;\n position: relative;\n background: linear-gradient(to right, ${props => props.color} 0%, ${props => props.color} 32%, #fff 32%, #fff 100%);\n border-radius: 5px;\n width: 132px;\n height: 50px;\n border: 1px solid #e8ebef;\n`\n\nexport const CardIcon = styled.div`\n margin-left: 8px;\n margin-top: 10px;\n`\n\nexport const CardText = styled.span`\n padding-left: 14px;\n padding-top: 5px;\n text-transform: uppercase;\n color: #47525e;\n font-family: Lato;\n font-size: 11px;\n font-weight: 400;\n line-height: 13px;\n display: block;\n`\n\nexport const CardNumber = styled.span`\n position: absolute;\n color: #5a6978;\n font-family: Lato;\n font-size: 16px;\n font-weight: 700;\n line-height: 16px;\n right: 10px;\n bottom: 8px;\n`\n","import React from 'react'\nimport * as S from './styled'\n\nexport default function CampaignReviewProductsButtons({ style, text, color, icon, number }) {\n return (\n \n ![\"Cover\"](\"community-profile-default-picture.png\")
\n \n \n Runners world \n Rome, Italy \n \n \n
\n \n \n \n \n
\n \n {t('startDate')} \n {startDate} \n
\n \n {t('endDate')} \n {endDate} \n
\n \n {t('budgetUsed')} \n € 1200 \n
\n \n
\n \n ![\"Rewards\"](\"/icons/rewards.png\")
\n
\n \n {t('rewards')}
\n{title}
\n \n\n
\n {title}
\n\n
\n {additionalInfo}
\n\n \n {rewardCost} \n \n
\n \n \n
\n \n \n {t('survey')}
\n{surveys.name}
\n {surveys.questions.map(survey => (\n{name}
\n{question}
\n{`${total} ${t('responses')}`}
\n\n\n {!optionOne.percentage &&\n !optionTwo.percentage &&\n !optionThree.percentage &&\n !optionFour.percentage &&\n !optionFive.percentage ? (\n <>\n \n {t('surveyZeroResponses')} \n {t('pleaseComebackLater')} \n \n \n ) : (\n \n \n )}\n
\n {`Q${surveyIndex + 1} - ${question}`}
\n{`${total} ${t('responses')}`}
\n\n\n {!optionOne.percentage &&\n !optionTwo.percentage &&\n !optionThree.percentage &&\n !optionFour.percentage &&\n !optionFive.percentage ? (\n <>\n \n {t('surveyZeroResponses')} \n {t('pleaseComebackLater')} \n \n \n ) : (\n
\n \n \n
\n \n \n Event
\n{title}
\n \n\n
\n \n
\n {about}
\n\n \n
\n \n {t('welcomeAd')}
\n{name}
\n \n\n \n
\n \n \n Chat channel
\n{name}
\n \n\n \n \n
\n\n \n
\n {name}
\n\n
\n \n {t('sponsored')}\n
\n{t('reportIssues')}
\n\n \n
\n\n \n Content
\n{title}
\n \n\n
\n {title}
\n\n
\n {about}
\n{title}
\n \n\n
\n {title}
\n\n
\n {about}
\n{title}
\n \n\n
\n {title}
\n\n
\n {about}
\n{title}
\n \n\n
\n {title}
\n\n
\n {about}
\n\n \n
\n \n {bannerName[type] ?? 'Banner'}
\n{name}
\n \n\n \n
\n \n {bannerName[type] ?? 'Banner'}
\n\n
\n )\n }\n return null\n}\n\nexport const getProductCategories = async () => {\n const { data: response } = await api.get(`/community/${communityId()}/adv-products-categories`)\n if (!response.data) throw new Error(response.error)\n const productCategoriesArray = Object.values(response.data)\n const productCategoriesArrayFormatted = productCategoriesArray.map(product => {\n return { value: product.id, label: product.name }\n })\n return productCategoriesArrayFormatted\n}\n\nexport const ProductCategoriesSelect = ({ control, errors, defaultValue, disabled }) => {\n const { t } = useTranslation()\n\n const defaultCategoryValue = {\n value: defaultValue?.id,\n label: defaultValue?.name,\n }\n const { data, error } = useAsync({\n promiseFn: getProductCategories,\n control,\n errors,\n })\n if (error) return null\n if (data) {\n return (\n <>\n \n
*/}\n \n
\n \n )\n }\n return null\n}\n\nexport const getSpecialOfferDurations = async () => {\n const { data: response } = await api.get(`/community/${communityId()}/special-offer-durations`)\n if (!response.data) throw new Error(response.error)\n\n // Temporary solution ultil backend fix the array\n const specialOfferDiscount = [\n { id: 4, slug: 'one_month', title: `1 ${i18n.t('month')}` },\n { id: 1, slug: 'three_months', title: `3 ${i18n.t('months')}` },\n { id: 2, slug: 'six_months', title: `6 ${i18n.t('months')}` },\n { id: 3, slug: 'twelve_months', title: `12 ${i18n.t('months')}` },\n ]\n\n const specialOfferDurationsArrayFormatted = specialOfferDiscount.map(specialOffer => {\n return { value: specialOffer.id, label: specialOffer.title }\n })\n return specialOfferDurationsArrayFormatted\n}\n\nexport const SpecialOfferDurationsSelect = ({ defaultValue, control, errors, setSpecialOfferDurationSelect }) => {\n const { t } = useTranslation()\n const defaultSpecialOffer = {\n value: defaultValue?.id,\n label: defaultValue?.title,\n }\n\n const { data, error } = useAsync({\n promiseFn: getSpecialOfferDurations,\n control,\n errors,\n })\n\n if (error) return null\n if (data) {\n return (\n <>\n \n
\n \n )\n }\n return null\n}\n\nexport const getAllSponsorsFromCommunity = async () => {\n const response = await api.get(`/community/${communityId()}/sponsors?limit=999`, { communityId })\n if (response.status !== 200) throw new Error(response.error)\n return response.data\n}\n\nexport const getAllCommunitiesFromSponsor = async () => {\n const response = await api.get(`/sponsor/communities`)\n if (response.status !== 200) throw new Error(response.error)\n return response.data\n}\n\nexport const getCommunityKpis = async () => {\n const response = await api.get(`/community/${communityId()}/kpis`, { communityId })\n if (response.status !== 200) throw new Error(response.error)\n return response\n}\n\nexport const getSponsorAndSponsorAlerts = async (\n companyId,\n setLoading,\n setSponsorInformations,\n updateSponsorInformationsAction,\n createSponsorCommunityChannelAction,\n setAllCommunitiesFromSponsorAction,\n setSponsorIncompleteProfile,\n setUserInformations,\n) => {\n if (companyId !== undefined) {\n try {\n const currentLanguage = i18n.language\n const communities = await api.get(`/sponsor-community?limit=999&offset=0&language=${currentLanguage || 'en'}`)\n const communitiesArray = Object.values(communities?.data?.rows)\n setAllCommunitiesFromSponsorAction(communitiesArray)\n\n const result = await api.get(`/company/${companyId}`)\n setSponsorInformations(result?.data)\n updateSponsorInformationsAction(result?.data)\n\n const userProfileInformations = await api.get(`profile`)\n setUserInformations(userProfileInformations?.data)\n\n const { id } = result.data\n const sponsorLogo = result?.data?.logoAdvPlatServerPath\n const sponsorName = result?.data?.name\n\n // TODO refactor this (hack to update the firebase channels and keeping them always updated)\n communitiesArray.forEach(community => {\n createSponsorCommunityChannelAction(\n id,\n community?.id,\n community?.name,\n sponsorName,\n sponsorLogo,\n community.networkLogoPath,\n )\n })\n const { data: responseAlerts } = await api.get(`/sponsor/user-alerts`)\n setSponsorIncompleteProfile(responseAlerts?.data?.incompleteProfile?.status)\n setLoading(false)\n } catch (error) {\n toast.error(i18n.t('failedToFetchData'))\n setLoading(false)\n throw new Error(error)\n }\n }\n}\n\nexport const getAllCommunitiesSponsoredByTheSponsor = async () => {\n const currentLanguage = i18n.language\n const response = await api.get(`/sponsor-community?limit=999&offset=0&language=${currentLanguage || 'en'}`)\n if (response.status !== 200) throw new Error(response.error)\n return response\n}\n\nexport const getCommunityInformations = async ({ communityId }) => {\n const response = await api.get(`/community/${communityId}`, { communityId })\n if (response.status !== 200) throw new Error(response.error)\n return response\n}\n\nexport const getCampaignsRunningOrFinalizedForTheSponsor = async () => {\n const response = await api.get(`/sponsor/campaigns-running-or-finalized?limit=999`)\n if (response.status !== 200) throw new Error(response.error)\n return response\n}\n\nexport const getCampaignsRunningOrFinalizedForTheCommunity = async () => {\n const response = await api.get(`/community/${communityId()}/campaigns-running-or-finalized?limit=999`)\n if (response.status !== 200) throw new Error(response.error)\n return response\n}\n\nexport const getCampaignsWaitingForReviewForTheCommunity = async () => {\n const response = await api.get(`/community/${communityId()}/campaigns-pending-approval?limit=999`)\n if (response.status !== 200) throw new Error(response.error)\n return response\n}\n\nexport const CampaignsRunningOrFinalized = ({ campaignsRunningCallback, setCampaignsRunningOrFinalized, filter }) => {\n const { data, error } = useAsync({\n promiseFn: getCampaignsRunningOrFinalizedForTheSponsor,\n watch: campaignsRunningCallback,\n })\n if (error) return null\n if (data) {\n const campaignsRunningOrFinalized = data.data\n setCampaignsRunningOrFinalized(campaignsRunningOrFinalized)\n const filteredCampaigns = returnDataFiltered(filter, campaignsRunningOrFinalized)\n return (\n <>\n {filteredCampaigns.map(campaign => (\n \n setZoom(zoom)} />\n \n setRotation(rotation)}\n />\n \n
\n \n )}\n \n \n setOpenDialogDeletePhoto(true)}>{t('deletePhoto')} \n
\n \n
\n \n handleStepClick(e, label)}\n style={{ cursor: 'pointer' }}\n disabled={false}\n classes={{ completed: classes.completed }}\n >\n \n
\n )\n}\n","import styled from 'styled-components'\nimport Modal from 'react-bootstrap/Modal'\nimport Button from '~/components/Shared/Button'\n\nexport const ModalCustom = styled(Modal).attrs({\n backdrop: 'static',\n keyboard: false,\n})`\n .modal-dialog {\n @media (min-width: 576px) {\n max-width: 610px;\n height: auto;\n margin: auto;\n padding: 0;\n margin-top: 100px;\n }\n }\n\n .modal-body {\n padding: 15px 25px 25px 25px !important;\n background-color: #f2f2f2;\n }\n\n .modal-content {\n width: 700px;\n padding-bottom: 10px;\n height: auto;\n margin: auto;\n border-radius: 0;\n }\n\n .error-message {\n font-family: Roboto;\n color: #ea343e;\n font-size: 12px;\n font-weight: 600;\n opacity: 0.9;\n }\n`\n\nexport const Title = styled.p`\n color: #404257;\n margin-bottom: 0px;\n margin-left: 5px !important;\n font-family: Lato;\n font-size: 18px;\n font-weight: 700;\n opacity: 0.9;\n`\n\nexport const Subtitle = styled.p`\n margin-bottom: 0px;\n margin-top: 5px;\n line-height: 19px;\n opacity: 0.85;\n color: #404257;\n width: fit-content;\n margin-bottom: 12px;\n font-family: Lato;\n font-size: 15px;\n font-weight: 600;\n text-align: center;\n`\n\nexport const FormContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-top: 30px;\n width: 100%;\n\n .StripeElement {\n display: block;\n margin: 10px 0 20px 0;\n max-width: 500px;\n padding: 10px 14px;\n font-size: 1em;\n font-family: 'Source Code Pro', monospace;\n box-shadow: rgba(50, 50, 93, 0.14902) 0px 1px 3px, rgba(0, 0, 0, 0.0196078) 0px 1px 0px;\n border: 0;\n outline: 0;\n border-radius: 4px;\n background: white;\n width: 100%;\n }\n\n input::placeholder {\n color: #aab7c4;\n }\n\n input:focus,\n .StripeElement--focus {\n box-shadow: rgba(50, 50, 93, 0.109804) 0px 4px 6px, rgba(0, 0, 0, 0.0784314) 0px 1px 3px;\n -webkit-transition: all 150ms ease;\n transition: all 150ms ease;\n }\n`\n\nexport const Label = styled.div`\n color: #6b7c93;\n font-weight: 300;\n letter-spacing: 0.025em;\n margin-bottom: 0px !important;\n text-align: center;\n`\n\nexport const Form = styled.form.attrs({\n id: 'stripe',\n})`\n margin-top: 8px;\n`\n\nexport const ModalFooter = styled(Modal.Footer)`\n padding-top: 4px !important;\n padding-bottom: 4px !important;\n`\n\nexport const SubmitButton = styled(Button).attrs({\n style: { marginTop: '12px', width: '120px' },\n type: 'submit',\n height: '40px',\n color: '#00A2FF',\n})``\n\nexport const PoweredByStripe = styled.img.attrs({\n alt: 'Stripe Logo',\n src: '/powered-by-stripe.png',\n})`\n margin-top: 10px;\n width: 300px;\n height: 50px;\n object-fit: cover;\n`\n\nexport const PoweredByStripeContainer = styled.div`\n display: flex;\n justify-content: center;\n`\n\nexport const Container = styled.div`\n position: relative;\n text-align: center;\n`\n\nexport const StepContainer = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n width: 100%;\n height: 170px;\n background-image: linear-gradient(to right, #00a2ff 50%, #0090de 100%);\n position: relative;\n z-index: 10 !important;\n padding-top: 10px;\n`\n\nexport const StepContainerTitle = styled.p`\n color: #ffffff;\n font-family: Montserrat;\n font-size: 28px;\n text-transform: uppercase;\n font-weight: bold;\n`\n\nexport const EmailInputContainer = styled.div`\n width: 78%;\n margin: 0 auto;\n\n .MuiInput-underline::before,\n .MuiInput-underline::after {\n display: none;\n }\n\n input {\n padding: 0.75rem;\n font-size: 0.93rem;\n background-color: #fff;\n border-radius: 5px;\n transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;\n border: 1px solid #e6e6e6;\n box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);\n background: white;\n\n &::placeholder {\n color: #757680 !important;\n }\n }\n`\n\nexport const StripeElementContainer = styled.div`\n padding-top: 5px;\n padding-bottom: 16px;\n width: 100%;\n\n .MuiInput-underline::before,\n .MuiInput-underline::after {\n display: none;\n }\n\n .StripeElement {\n margin: 0 auto;\n width: 100% !important;\n }\n`\n","import styled from 'styled-components'\n\nexport const Container = styled.div`\n width: 80%;\n margin: 0 auto;\n`\n\nexport const StripeElementContainer = styled.div`\n padding-top: 5px;\n\n input {\n padding: 0.75rem;\n font-size: 0.93rem;\n background-color: #fff;\n border-radius: 5px;\n transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;\n border: 1px solid #e6e6e6;\n box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);\n\n &::placeholder {\n color: #757680 !important;\n }\n\n &:focus {\n outline: 0px;\n border-color: hsla(210, 96%, 45%, 50%);\n box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02), 0 0 0 3px hsla(210, 96%, 45%, 25%),\n 0 1px 1px 0 rgba(0, 0, 0, 0.08);\n }\n }\n\n .MuiInput-underline::before,\n .MuiInput-underline::after {\n display: none;\n }\n\n .StripeElement {\n margin: 0 auto;\n width: 100% !important;\n }\n\n // Styling the Stripe IBAN Element\n &.iban-container {\n transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;\n box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);\n\n &:has(.StripeElement--focus) {\n outline: 0px;\n border-color: hsla(210, 96%, 45%, 50%);\n box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02), 0 0 0 3px hsla(210, 96%, 45%, 25%),\n 0 1px 1px 0 rgba(0, 0, 0, 0.08);\n }\n }\n`\n\nexport const Label = styled.label`\n font-weight: 300;\n letter-spacing: 0.025em;\n padding: 0;\n margin-bottom: 2px !important;\n font-size: 0.93rem;\n color: #30313d;\n text-align: center;\n`\n","import React, { useMemo } from 'react'\nimport { IbanElement, AddressElement } from '@stripe/react-stripe-js'\nimport useResponsiveFontSize from '~/helper/useResponsiveFontSize'\nimport TextField from '@material-ui/core/TextField'\nimport i18n from '~/i18n'\nimport { useTranslation } from 'react-i18next'\nimport { PoweredByStripe, PoweredByStripeContainer } from '../styled'\nimport * as S from './styled'\n\nexport default function IbanForm({ onSubmit }) {\n const { t } = useTranslation()\n\n const fontSize = useResponsiveFontSize()\n\n const IBAN_STYLE = useMemo(\n () => ({\n base: {\n color: '#424770',\n padding: '12px',\n letterSpacing: '0.025em',\n fontFamily: 'Source Code Pro, monospace',\n backgroundColor: 'white',\n fontSize,\n '::placeholder': {\n color: '#aab7c4',\n },\n ':-webkit-autofill': {\n color: '#424770',\n },\n },\n invalid: {\n color: '#9e2146',\n iconColor: '#9e2146',\n ':-webkit-autofill': {\n color: '#9e2146',\n },\n },\n }),\n [fontSize],\n )\n\n const currentLanguage = i18n.language\n\n const IBAN_ELEMENT_OPTIONS = useMemo(\n () => ({\n supportedCountries: ['SEPA'],\n // Elements can use a placeholder as an example IBAN that reflects\n // the IBAN format of your customer's country. If you know your\n // customer's country, we recommend that you pass it to the Element as the\n // placeholderCountry.\n placeholderCountry: currentLanguage.toUpperCase(),\n style: IBAN_STYLE,\n }),\n [currentLanguage, IBAN_STYLE],\n )\n\n return (\n \n )\n}\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useState, useEffect } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport Modal from 'react-bootstrap/Modal'\nimport ShouldRender from '~/components/ShouldRender'\nimport { toast } from 'react-toastify'\nimport TextField from '@material-ui/core/TextField'\nimport {\n useStripe,\n useElements,\n CardNumberElement,\n IbanElement,\n CardCvcElement,\n CardExpiryElement,\n AddressElement,\n} from '@stripe/react-stripe-js'\nimport Spinner from 'react-bootstrap/Spinner'\nimport { PAYMENT_OPTIONS } from '~/pages/Sponsor/containers/StartNewCampaign/StartNewCampaignStep2/constants'\nimport useResponsiveFontSize from '~/helper/useResponsiveFontSize'\nimport useSponsorFunctions from '~/helper/sponsorFunctions'\nimport StepPayment from '~/components/StepPayment'\nimport * as S from './styled'\nimport IbanForm from './IbanForm/IbanForm'\n\nexport default function ModalCreditCardInformation({\n handleCloseModal,\n showModal,\n paymentOption,\n stripeClientSecret,\n validateAndCreateCampaign,\n sendMessageToCommunityAfterTheCampaignCreation,\n handleCloseModalCreateCampaign,\n validateIfCampaignCanBeCreated,\n}) {\n const { t } = useTranslation()\n const { resetStripeClientSecretAction } = useSponsorFunctions()\n const [loadingStripe, setLoadingStripe] = useState(false)\n\n const isCreditSelected = paymentOption === PAYMENT_OPTIONS.CREDIT_CARD\n const isSEPASelected = paymentOption === PAYMENT_OPTIONS.SEPA\n\n const closeModalAndResetStripeClientSecret = () => {\n resetStripeClientSecretAction()\n handleCloseModal()\n }\n\n const useOptions = () => {\n const fontSize = useResponsiveFontSize()\n const options = useMemo(\n () => ({\n style: {\n base: {\n fontSize,\n color: '#424770',\n letterSpacing: '0.025em',\n fontFamily: 'Source Code Pro, monospace',\n '::placeholder': {\n color: '#aab7c4',\n },\n },\n invalid: {\n color: '#9e2146',\n },\n },\n }),\n [fontSize],\n )\n return options\n }\n\n const stripe = useStripe()\n const elements = useElements()\n const options = useOptions()\n\n const handleSubmit = async event => {\n if (!stripe || !elements) return\n\n setLoadingStripe(true)\n\n event.preventDefault()\n\n // Verify if the campaign can be created\n const response = await validateIfCampaignCanBeCreated()\n\n if (!response?.data?.verifyIfCampaignCanBeCreated) {\n setLoadingStripe(false)\n return toast.error('Cannot create campaign, please change the parameters and try again')\n }\n\n const addressElement = elements.getElement(AddressElement)\n const { complete, value: addressElementValues } = await addressElement.getValue()\n\n const billingDetails = {\n email: event?.target?.email?.value,\n address: addressElementValues?.address,\n name: addressElementValues?.name,\n }\n\n let result\n\n if (isSEPASelected) {\n if (!complete) {\n setLoadingStripe(false)\n return toast.error('Incomplete address, fill all fields.')\n }\n\n result = await stripe.confirmSepaDebitPayment(stripeClientSecret, {\n payment_method: {\n sepa_debit: elements.getElement(IbanElement),\n billing_details: billingDetails,\n },\n })\n }\n\n if (isCreditSelected) {\n if (!complete) {\n setLoadingStripe(false)\n return toast.error('Incomplete address, fill all fields.')\n }\n\n result = await stripe.confirmCardPayment(stripeClientSecret, {\n payment_method: {\n card: elements.getElement(CardNumberElement),\n billing_details: billingDetails,\n },\n })\n }\n\n if (result.error) {\n toast.error(result.error.message)\n setLoadingStripe(false)\n } else {\n // SEPA Direct Debit payments are asynchronous,\n // so funds are not immediately available and status will be `'processing'`\n if (result.paymentIntent.status === 'succeeded' || result.paymentIntent.status === 'processing') {\n setLoadingStripe(false)\n try {\n toast.success(t('yourPaymentHasBeenAuthorized'))\n await validateAndCreateCampaign()\n sendMessageToCommunityAfterTheCampaignCreation()\n setTimeout(() => {\n handleCloseModal()\n handleCloseModalCreateCampaign()\n }, 1500)\n } catch {\n console.log('Error')\n }\n } else {\n toast.error(t('somethingWentWrongPayment'))\n }\n setLoadingStripe(false)\n }\n }\n\n useEffect(() => {\n handleCloseModal()\n }, [])\n\n return (\n {label}
\n \n \n ))}\n \n{t('dateNotAvailable')}
\n\n {isNotAllowedRange ? (\n <>\n\n \n {`${communityCurrencySymbol} ${currencyFormat(specialOfferPrice)}`} \n\n {` / ${t('monthly')}`} \n \n
\n )\n}\n\nconst WithoutSpecialOffer = ({ packageInformations, communityCurrencySymbol }) => {\n const { monthlyPrice: packagePrice } = packageInformations\n\n const { t } = useTranslation()\n\n return (\n <>\n \n \n {`${communityCurrencySymbol} ${currencyFormat(packagePrice)}`}\n \n\n {` / ${t('monthly')}`} \n
\n\n \n {name} \n {description ? {description} : null}\n
\n\n ![\"SEPA\"](\"icons/sepa-logo.png\"){kind=logo}
\n\n \n {t('formatsSelected', {\n qtd: productsSelected.length,\n })}\n
\n\n handleStepClick(e, label)}\n disabled={false}\n classes={{ completed: classes.completed }}\n >\n \n
\n )\n}\n","import styled from 'styled-components'\nimport Modal from 'react-bootstrap/Modal'\nimport { MdEdit } from 'react-icons/md'\nimport { customMedia } from '~/styles/global'\nimport WhiteButton from '~/components/WhiteButton'\n\nexport const ModalCreateCampaignStep1 = styled(Modal)`\n .modal-dialog {\n @media (min-width: 576px) {\n max-width: ${props => (props.step === 0 ? '950px' : '1150px')};\n height: auto;\n margin: auto;\n padding: 0;\n margin-top: 50px;\n margin-right: ${props => (props.tutorialIsActive === false ? null : '25vw')};\n position: relative;\n\n ${customMedia.lessThan('2060px')`\n margin-right: ${props => (props.tutorialIsActive === false ? null : '15vw')};\n `}\n\n ${customMedia.lessThan('1790px')`\n margin-right: ${props => (props.tutorialIsActive === false ? null : '2vw')};\n `}\n\n ${customMedia.lessThan('1410px')`\n margin-right: ${props => (props.tutorialIsActive === false ? null : '0vw')};\n `}\n\n ${customMedia.lessThan('1376px')`\n height: auto;\n margin: auto;\n padding: 0;\n margin-top: 50px;\n `}\n }\n }\n .modal-content {\n height: auto;\n min-height: 100%;\n border-radius: 0;\n margin: 0;\n padding: 0;\n }\n .modal-body {\n padding: 10px 30px 30px 30px !important;\n }\n`\n\nexport const ModalCreateCampaignStep2 = styled(Modal).attrs({\n backdrop: 'static',\n keyboard: false,\n})`\n .modal-dialog {\n @media (min-width: 576px) {\n max-width: ${props => (props.step === 0 ? '950px' : '1150px')};\n height: auto;\n margin: auto;\n padding: 0;\n margin-top: 50px;\n margin-right: ${props => (props.tutorialIsActive === false ? null : '20vw')};\n position: relative;\n\n ${customMedia.lessThan('2100px')`\n margin-right: ${props => (props.tutorialIsActive === false ? null : '5vw')};\n `}\n\n ${customMedia.lessThan('1790px')`\n margin-right: ${props => (props.tutorialIsActive === false ? null : '2vw')};\n `}\n\n ${customMedia.lessThan('1410px')`\n margin-right: ${props => (props.tutorialIsActive === false ? null : '0vw')};\n `}\n\n ${customMedia.lessThan('1612px')`\n height: auto;\n margin: auto;\n padding: 0;\n margin-top: 50px;\n `}\n }\n }\n .modal-content {\n height: auto;\n min-height: 100%;\n border-radius: 0;\n margin: 0;\n padding: 0;\n }\n .modal-body {\n padding: 10px 30px 30px 30px !important;\n }\n`\n\nexport const Container = styled.div`\n position: relative;\n text-align: center;\n`\n\nexport const Title = styled.p`\n color: var(--text-bold);\n margin: 0px;\n font-family: Lato;\n font-size: 17px;\n font-weight: 600;\n`\n\nexport const ModalFooter = styled(Modal.Footer)`\n display: flex;\n justify-content: flex-start !important;\n`\n\nexport const ModalFooterStepTwo = styled(Modal.Footer)`\n display: flex;\n justify-content: space-between !important;\n`\n\nexport const StepContainer = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n width: 100%;\n height: 170px;\n background-image: linear-gradient(to right, #00a2ff 50%, #0090de 100%);\n position: relative;\n z-index: 10 !important;\n padding-top: 10px;\n`\n\nexport const StepContainerTitle = styled.p`\n color: #ffffff;\n font-family: Montserrat;\n font-size: 28px;\n text-transform: uppercase;\n font-weight: bold;\n`\n\nexport const CancelButton = styled(WhiteButton).attrs({\n style: { padding: '0px 30px' },\n})``\n\nexport const ManageButton = styled(WhiteButton).attrs({\n style: { marginRight: '20px' },\n})``\n\nexport const ManageIcon = styled(MdEdit).attrs({\n color: 'var(--sponsor-primary)',\n size: 20,\n})``\n\nexport const DoItLaterButton = styled(WhiteButton).attrs({\n text: 'Do it later',\n style: { padding: '0px 30px' },\n})``\n\nexport const SetCampaignBackground = styled.div`\n position: absolute;\n width: 20px;\n height: 20px;\n top: 75px;\n left: 495px;\n border-radius: 100px;\n background-color: #fff;\n z-index: 1 !important;\n\n @media (max-width: 1174px) {\n display: none;\n }\n`\n\nexport const PaymentBackground = styled.div`\n position: absolute;\n width: 20px;\n height: 20px;\n top: 75px;\n left: 632px;\n border-radius: 100px;\n background-color: #fff;\n z-index: 1 !important;\n\n @media (max-width: 1174px) {\n display: none;\n }\n`\n","import React, { useState } from 'react'\nimport Modal from 'react-bootstrap/Modal'\nimport { useTranslation } from 'react-i18next'\nimport { useSelector, useDispatch } from 'react-redux'\nimport { useAsync } from 'react-async'\nimport { getAllCommunitiesSponsoredByTheSponsor } from '~/services/requests'\nimport CustomSpinner from '~/components/CustomSpinner'\nimport StartNewCampaignStep1 from '~/pages/Sponsor/containers/StartNewCampaign/StartNewCampaignStep1'\nimport StartNewCampaignStep2 from '~/pages/Sponsor/containers/StartNewCampaign/StartNewCampaignStep2'\nimport { resetCampaignProcess as resetCampaignProcessAction } from '~/store/modules/createCampaign/actions'\nimport ModalCreditCardInformationTutorialMocked from '~/components/ApplicationTutorial//Sponsor/ModalCreditCardInformationTutorialMocked'\nimport Step from '~/components/Step'\nimport * as CONST from '~/helper/const'\nimport * as S from './styled'\n\nexport default function StartNewCampaignModal({\n handleCloseModal,\n showModal,\n setCampaignsWaitingCallback,\n setCampaignsRunningCallback,\n}) {\n const { t } = useTranslation()\n const dispatch = useDispatch()\n const [showModalCreditCardInformationMocked, setShowModalCreditCardInformationMocked] = useState(false)\n const tutorialIsActive = useSelector(state => state.tutorial.tutorialIsActive)\n const step = useSelector(state => state.step.step)\n const { data, error, isPending } = useAsync({ promiseFn: getAllCommunitiesSponsoredByTheSponsor })\n if (error) return null\n if (isPending) return {label}
\n \n \n ))}\n \n\n \n \n\n \n {suggestions.map(suggestion => {\n const className = suggestion.active ? 'suggestion-item--active' : 'suggestion-item'\n\n const style = suggestion.active\n ? {\n backgroundColor: '#f2f2f2',\n cursor: 'pointer',\n padding: '5px 10px',\n }\n : {\n backgroundColor: '#ffffff',\n cursor: 'pointer',\n padding: '5px 10px',\n }\n return (\n \n {suggestion.description}\n
\n )\n })}\n \n \n )}\n {errors.adrFormatted && t('defaultValidation', { inputName: t('address') })}
\n{errors.adrFormatted && t('defaultValidation', { inputName: t('address') })}
\n\n
\n ) : null}\n\n {suggestions.map(suggestion => {\n const className = suggestion.active ? 'suggestion-item--active' : 'suggestion-item'\n const style = suggestion.active\n ? {\n backgroundColor: '#f2f2f2',\n cursor: 'pointer',\n padding: '5px 10px',\n }\n : {\n backgroundColor: '#ffffff',\n cursor: 'pointer',\n padding: '5px 10px',\n }\n\n return (\n \n \n \n \n {t('editProfile')} \n \n \n \n \n {(logoAdvPlatServerPath === null && sponsorS3LogoId() === null) ||\n (logoAdvPlatServerPath === undefined && sponsorS3LogoId() === null) ? (\n \n \n\n \n \n \n \n \n\n \n \n \n
\n )\n}\n","const createImage = url =>\n new Promise((resolve, reject) => {\n const image = new Image()\n image.addEventListener('load', () => resolve(image))\n image.addEventListener('error', error => reject(error))\n image.setAttribute('crossOrigin', 'anonymous')\n image.src = url\n })\n\nfunction getRadianAngle(degreeValue) {\n return (degreeValue * Math.PI) / 180\n}\n\n/**\n * @param {File} image - Image File url\n * @param {Object} pixelCrop - pixelCrop Object provided by react-easy-crop\n * @param {number} rotation - optional rotation parameter\n */\nexport default async function getCroppedImg(imageSrc, pixelCrop, rotation = 0) {\n const image = await createImage(imageSrc)\n const canvas = document.createElement('canvas')\n const ctx = canvas.getContext('2d')\n\n const maxSize = Math.max(image.width, image.height)\n const safeArea = 2 * ((maxSize / 2) * Math.sqrt(2))\n\n // set each dimensions to double largest dimension to allow for a safe area for the\n // image to rotate in without being clipped by canvas context\n canvas.width = safeArea\n canvas.height = safeArea\n\n // translate canvas context to a central location on image to allow rotating around the center\n ctx.translate(safeArea / 2, safeArea / 2)\n ctx.rotate(getRadianAngle(rotation))\n ctx.translate(-safeArea / 2, -safeArea / 2)\n\n // draw rotated image and store data\n ctx.drawImage(image, safeArea / 2 - image.width * 0.5, safeArea / 2 - image.height * 0.5)\n const data = ctx.getImageData(0, 0, safeArea, safeArea)\n\n // set canvas width to final desired crop size - this will clear existing context\n canvas.width = pixelCrop.width\n canvas.height = pixelCrop.height\n\n // paste generated rotate image with correct offsets for x,y crop values\n ctx.putImageData(\n data,\n 0 - safeArea / 2 + image.width * 0.5 - pixelCrop.x,\n 0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y,\n )\n\n return canvas.toDataURL('image/jpeg')\n}\n","import styled from 'styled-components'\nimport Modal from 'react-bootstrap/Modal'\nimport { IoMdArrowBack, IoIosImages } from 'react-icons/io'\nimport Button from '~/components/Shared/Button'\nimport { customMedia } from '~/styles/global'\n\nexport const ModalCustom = styled(Modal).attrs({\n backdrop: 'static',\n keyboard: false,\n})`\n .modal-dialog {\n max-width: 850px;\n height: auto;\n margin: auto;\n padding: 0;\n margin-top: 30px;\n margin-bottom: 30px;\n\n ${customMedia.lessThan('small')`\n margin-bottom: 0px;\n `}\n }\n\n .modal-content {\n height: auto;\n min-height: 100%;\n border-radius: 0;\n margin: 0;\n padding: 0;\n\n ${customMedia.lessThan('small')`\n width: 22.5rem !important;\n margin: auto;\n `}\n }\n\n .modal-title {\n display: flex;\n }\n\n p {\n margin: 0;\n }\n`\n\nexport const DeletePhoto = styled.p`\n color: var(--text-primary);\n font-family: Lato;\n font-size: 16px;\n font-weight: 700;\n opacity: 0.9;\n cursor: pointer;\n\n &:hover {\n opacity: 0.6;\n }\n`\n\nexport const CropContainerParent = styled.div`\n position: relative;\n width: 100%;\n height: 400px;\n`\n\nexport const CropContainer = styled.div`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 5px;\n`\n\nexport const Title = styled.p`\n color: #404257;\n margin-left: 5px !important;\n font-family: Lato;\n font-size: 16px;\n font-weight: 700;\n opacity: 0.9;\n`\n\nexport const NoImage = styled.div`\n background-color: #f2f2f2;\n height: 200px;\n width: 100%;\n`\n\nexport const NoImageIndicatorIcon = styled(IoIosImages).attrs({\n color: 'red',\n size: 28,\n})`\n position: absolute;\n top: -9999px;\n left: -9999px;\n right: -9999px;\n bottom: -9999px;\n margin: auto;\n`\n\nexport const BackIcon = styled(IoMdArrowBack).attrs({\n color: '#47525E',\n size: 28,\n})`\n cursor: pointer;\n`\n\nexport const ModalFooter = styled(Modal.Footer)`\n display: flex;\n justify-content: space-between !important;\n align-items: baseline !important;\n margin-bottom: 4px !important;\n padding-top: 0px !important;\n`\n\nexport const ChangePhotoButton = styled(Button).attrs({\n uppercase: true,\n style: { marginRight: '10px' },\n textColor: '#637383',\n border: '1px solid #8492A6',\n color: '#FFF',\n width: '180px',\n height: '40px',\n fontSize: '15px',\n})``\n\nexport const InputChangePhoto = styled.input.attrs({\n type: 'file',\n accept: 'image/x-png,image/gif,image/jpeg',\n style: { display: 'none' },\n})``\n\nexport const SavePhotoButton = styled(Button).attrs({\n uppercase: true,\n type: 'submit',\n width: '110px',\n height: '40px',\n fontSize: '15px',\n clickEffect: true,\n color: '#499D28',\n})``\n\nexport const SpinnerContainer = styled.div`\n position: fixed;\n top: 50%;\n left: 50%;\n`\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useState, useRef, useEffect, useCallback } from 'react'\nimport Modal from 'react-bootstrap/Modal'\nimport { toast } from 'react-toastify'\nimport Row from 'react-bootstrap/Row'\nimport { useTranslation } from 'react-i18next'\nimport Slider from '@material-ui/core/Slider'\nimport Dialog from '@material-ui/core/Dialog'\nimport Button from '@material-ui/core/Button'\nimport Spinner from 'react-bootstrap/Spinner'\nimport DialogActions from '@material-ui/core/DialogActions'\nimport DialogContent from '@material-ui/core/DialogContent'\nimport DialogContentText from '@material-ui/core/DialogContentText'\nimport DialogTitle from '@material-ui/core/DialogTitle'\nimport Cropper from 'react-easy-crop'\nimport Col from 'react-bootstrap/Col'\nimport DefaultLogoImage from '~/util/community-profile-default-picture.png'\nimport { modalBodyStyleDefault } from '~/helper/const'\nimport useSponsorFunctions from '~/helper/sponsorFunctions'\nimport useCampaignSelectors from '~/helper/campaignSelectors'\nimport { base64ImageToBlob } from '~/helper/formFunctions'\nimport getCroppedImg from './cropImage'\nimport * as S from './styled'\n\nexport default function ModalCropProfileImage({\n handleCloseModal,\n showModal,\n setModalStepToZero,\n sponsorInformations,\n}) {\n const { t } = useTranslation()\n const { sponsorS3Logo } = useCampaignSelectors()\n const { uploadS3RequestAction, removeS3FromStateAction } = useSponsorFunctions()\n const { logoAdvPlatServerPath } = sponsorInformations\n const [loading, setLoading] = useState(false)\n const [logoImage, setLogoImage] = useState(logoAdvPlatServerPath)\n const [openDialog, setOpenDialog] = useState(false)\n const [openDialogDeletePhoto, setOpenDialogDeletePhoto] = useState(false)\n const [crop, setCrop] = useState({ x: 0, y: 0 })\n const [rotation, setRotation] = useState(0)\n const [zoom, setZoom] = useState(1)\n const [croppedAreaPixels, setCroppedAreaPixels] = useState(null)\n const [croppedImage, setCroppedImage] = useState(null)\n const inputFile = useRef(null)\n\n const onCropComplete = useCallback((croppedArea, croppedAreaPixels) => {\n setCroppedAreaPixels(croppedAreaPixels)\n }, [])\n\n const getCroppedImage = useCallback(async () => {\n if (logoImage === null) {\n const imageToSend = base64ImageToBlob(DefaultLogoImage)\n uploadS3RequestAction(imageToSend)\n setModalStepToZero()\n handleCloseModal()\n } else {\n try {\n const croppedImage = await getCroppedImg(logoImage, croppedAreaPixels, rotation)\n setCroppedImage(croppedImage)\n\n const image = base64ImageToBlob(croppedImage)\n uploadS3RequestAction(image)\n setModalStepToZero()\n handleCloseModal()\n } catch (e) {\n toast.error(t('errorUpdatingImage'))\n }\n }\n }, [croppedAreaPixels, rotation, logoImage])\n\n const clickToCloseModal = () => {\n removeS3FromStateAction()\n setModalStepToZero()\n handleCloseModal()\n setLogoImage(logoAdvPlatServerPath)\n }\n\n const onBackButton = () => {\n removeS3FromStateAction()\n setModalStepToZero()\n setOpenDialog(false)\n setLogoImage(logoAdvPlatServerPath)\n }\n\n const deletePhoto = () => {\n setLogoImage(null)\n setCroppedImage(null)\n removeS3FromStateAction()\n setOpenDialogDeletePhoto(false)\n setLogoImage(null)\n }\n\n const changeFile = event => {\n event.stopPropagation()\n event.preventDefault()\n const reader = new FileReader()\n reader.onload = e => {\n setLogoImage(e.target.result)\n }\n reader.readAsDataURL(event.target.files[0])\n }\n\n const onButtonClick = () => {\n inputFile.current.click()\n }\n\n useEffect(() => {\n setLoading(true)\n if (logoAdvPlatServerPath === undefined || logoAdvPlatServerPath === null) {\n setLogoImage(sponsorS3Logo())\n }\n setLoading(false)\n }, [logoAdvPlatServerPath, sponsorS3Logo])\n\n return loading ? (\n \n setZoom(zoom)}\n />\n \n setRotation(rotation)}\n />\n \n
\n \n )}\n \n \n setOpenDialogDeletePhoto(true)}>{t('deletePhoto')} \n
\n \n
\n \n setZoom(zoom)}\n />\n \n setRotation(rotation)}\n />\n \n
\n \n )}\n \n \n setOpenDialogDeletePhoto(true)}>{t('deletePhoto')} \n
\n \n
\n \n {t('name')} \n
\n \n
\n\n \n {t('link')} \n
\n\n \n
\n \n
\n\n {review === false ? (\n updatingImage ? (\n \n
\n ) : (\n \n {t('image')} \n
\n \n
\n )\n ) : null}\n \n {imageUrl !== null ? (\n
\n \n 
\n {t('skipAdd')} \n
\n ) : (\n <>\n \n
\n\n \n {t('description')} \n
\n\n \n
\n \n
\n\n \n {review === false ? (\n updatingImage ? (\n
\n \n }\n rightColumn={\n \n
\n ) : (\n \n {t('image')} \n
\n \n
\n )\n ) : null}\n \n
\n\n \n Date \n
\n\n \n
\n \n End date \n
\n\n \n About \n
\n\n \n
\n \n When is the event? \n \n \n
\n\n \n
\n\n \n
\n \n
\n \n
\n \n
\n )}\n \n }\n name=\"eventLocation\"\n control={control}\n defaultValue={eventLocation === null ? '' : eventLocation}\n rules={{\n required: `${t('eventLocation')} ${t('isRequired')}`,\n }}\n />\n \n Event location \n {}} value=\"\">\n {({ getInputProps, suggestions, getSuggestionItemProps }) => (\n
\n \n \n {suggestions.map(suggestion => {\n const className = suggestion.active ? 'suggestion-item--active' : 'suggestion-item'\n\n const style = suggestion.active\n ? {\n backgroundColor: '#f2f2f2',\n cursor: 'pointer',\n padding: '5px 10px',\n }\n : {\n backgroundColor: '#ffffff',\n cursor: 'pointer',\n padding: '5px 10px',\n }\n return (\n \n {suggestion.description}\n
\n )\n })}\n \n
\n \n \n\n \n
\n\n \n Event organizer \n
\n \n
\n \n
\n\n \n
\n\n {review === false || review === undefined ? (\n updatingFile ? (\n \n
\n ) : (\n \n Files \n
\n \n
\n )\n ) : null}\n\n {review === false || review === undefined ? (\n updatingImage ? (\n \n
\n ) : (\n \n Image \n
\n \n
\n )\n ) : null}\n \n {imageUrl !== null ? (\n <>\n \n
\n \n {titleWatch === undefined ? title : titleWatch} \n
\n \n
\n \n {startDate !== '' ? (\n \n {aboutWatch === undefined ? about : aboutWatch}\n \n
\n \n ) : (\n <>\n \n
\n ) : null}\n \n {titleWatch === undefined ? title : titleWatch} \n
\n \n
\n\n \n {startDate !== '' ? (\n \n {aboutWatch === undefined ? about : aboutWatch}\n \n
\n \n )}\n \n
\n ) : null}\n \n
\n\n \n {t('dateExpire')} \n
\n\n \n
\n \n {t('additionalInfo')} \n
\n\n \n
\n \n {t('price')} \n setRewardCost(e.target.value)}\n />\n {review === true ? null : (\n
\n\n \n
\n )}\n\n At this level 12 members can afford this advantage now
\n \n
\n \n {t('useCouponType')} \n
\n\n {couponType == null\n ? null\n : (() => {\n switch (couponType.label) {\n case t('couponReusable'):\n return (\n <>\n \n
\n \n {t('writeTheCouponCode')} \n
\n \n {t('howManyCoupons')} \n
\n \n {t('whereCanBeClaimed')} \n
\n \n
\n \n )\n\n case t('couponBurnable'):\n return (\n <>\n \n {t('burnableCouponCodes')} \n {t('typeCouponAndPressEnter')} \n setBurnableCode(newBurnableCode)}\n placeholder={t('typeCouponAndPressEnter')}\n maxTags={10}\n removeOnBackspace\n readOnly={review || false}\n />\n
\n \n {t('whereCanBeClaimed')} \n
\n \n )\n case t('no'):\n return null\n default:\n return null\n }\n })()}\n\n {review === false ||\n (review === undefined && (\n \n
\n ))}\n\n {review === false || review === undefined ? (\n updatingImage ? (\n \n
\n ) : (\n \n {t('image')} \n
\n \n
\n )\n ) : null}\n \n
\n\n \n {t('about')} \n
\n\n {review === false ? (\n updatingImage ? (\n \n
\n ) : (\n \n {t('image')} \n
\n \n
\n )\n ) : null}\n \n
\n\n \n {t('title')} \n
\n\n \n
\n \n {t('description')} \n\n
\n\n \n
\n \n
\n\n \n {t('title')} \n
\n\n \n
\n \n {t('description')} \n\n
\n\n \n
\n \n {t('careToComment')} \n
\n\n \n
\n\n \n {t('about')} \n
\n\n \n
\n\n {review === false ? (\n updatingFile ? (\n \n
\n ) : (\n \n {t('files')} \n
\n \n
\n )\n ) : null}\n\n {review === false ? (\n updatingImage ? (\n \n
\n ) : (\n \n {t('image')} \n
\n \n
\n )\n ) : null}\n \n \n
\n \n \n {t('survey')}
\n{surveys.name}
\n {surveys.questions.map(survey => (\n{name}
\n{question}
\n{`${total} ${t('responses')}`}
\n\n\n {!optionOne.percentage &&\n !optionTwo.percentage &&\n !optionThree.percentage &&\n !optionFour.percentage &&\n !optionFive.percentage ? (\n <>\n \n {t('surveyZeroResponses')} \n {t('pleaseComebackLater')} \n \n \n ) : (\n
\n {`Q${surveyIndex + 1} - ${question}`}
\n{`${total} ${t('responses')}`}
\n\n\n {!optionOne.percentage &&\n !optionTwo.percentage &&\n !optionThree.percentage &&\n !optionFour.percentage &&\n !optionFive.percentage ? (\n <>\n \n {t('surveyZeroResponses')} \n {t('pleaseComebackLater')} \n \n \n ) : (\n
\n \n \n
\n \n Content
\n{title}
\n \n\n
\n {title}
\n\n
\n {about}
\n{title}
\n \n\n
\n {title}
\n\n
\n {about}
\n{title}
\n \n\n
\n {title}
\n\n
\n {about}
\n{title}
\n \n\n
\n {title}
\n\n
\n {about}
\n\n {t('question')} \n setQuestion(e.target.value)}\n disabled={review || false}\n inputProps={{\n maxLength: 100,\n }}\n inputRef={register({ required: true })}\n />\n \n \n\n {question !== '' && (\n {`${questionLength} ${t('charactersLeft')}`} \n )}\n {optionOneInputWatch !== '' && (\n {`${optionOneLength} ${t('charactersLeft')}`} \n )}\n {optionTwoInputWatch !== '' && (\n {`${optionTwoLength} ${t('charactersLeft')}`} \n )}\n {optionThreeInputWatch !== '' && (\n \n {`${optionThreeLength} ${t('charactersLeft')}`}\n \n )}\n {optionFourInputWatch !== '' && (\n {`${optionFourLength} ${t('charactersLeft')}`} \n )}\n {optionFiveInputWatch !== '' && (\n {`${optionFiveLength} ${t('charactersLeft')}`} \n )}\n
\n {errors.question && t('defaultValidation', { inputName: t('question') })}
\n\n
\n \n {`${t('question')} ${surveyIndex + 1}`} \n setQuestion(e.target.value)}\n disabled={review || false}\n inputProps={{\n maxLength: 100,\n }}\n inputRef={register({ required: true })}\n />\n \n \n
\n\n {question !== '' && (\n {errors.question && t('defaultValidation', { inputName: t('question') })}
\n\n
\n \n {`Question ${surveyIndex + 1} `} \n {survey.question} \n
\n \n
\n \n {dateFormatted} \n {survey.question} \n
\n \n
\n \n {t('title')} \n
\n \n
\n\n \n {t('link')} \n
\n\n \n
\n \n {t('description')} \n
\n\n \n
\n \n {t('name')} \n
\n \n
\n\n \n {t('link')} \n
\n\n \n
\n \n
\n {updatingImage ? (\n \n
\n ) : (\n \n {t('image')} \n
\n \n setUpdatingImage(!updatingImage)} />\n
\n )}\n \n {imageUrl !== null ? (\n
\n \n \n {t('skipAdd')} \n
\n ) : (\n <>\n \n
\n\n \n {t('description')} \n
\n\n \n
\n \n
\n\n \n {updatingImage ? (\n
\n \n }\n rightColumn={\n \n
\n ) : (\n \n {t('image')} \n
\n \n
\n )}\n \n
\n\n \n {t('dateExpire')} \n
\n\n \n
\n \n {t('additionalInfo')} \n
\n\n \n
\n \n {t('price')} \n setRewardCost(e.target.value)}\n />\n
\n\n \n
\n \n
\n \n {t('useCouponType')} \n
\n\n {couponType === undefined\n ? null\n : (() => {\n switch (couponType.label) {\n case t('couponReusable'):\n return (\n \n
\n \n
\n )\n\n case t('couponBurnable'):\n return (\n \n {t('writeTheCouponCode')} \n
\n \n {t('howManyCoupons')} \n
\n \n {t('whereCanBeClaimed')} \n
\n \n
\n \n
\n )\n case t('no'):\n return null\n default:\n return null\n }\n })()}\n\n \n {t('burnableCouponCodes')} \n {t('typeCouponAndPressEnter')} \n setBurnableCode(newBurnableCode)}\n placeholder={t('typeCouponAndPressEnter')}\n maxTags={10}\n removeOnBackspace\n readOnly={false}\n />\n
\n \n {t('whereCanBeClaimed')} \n
\n \n
\n {updatingImage ? (\n \n
\n ) : (\n \n {t('image')} \n
\n \n setUpdatingImage(!updatingImage)} />\n
\n )}\n \n
\n\n \n Date \n
\n\n \n
\n \n End date \n
\n\n \n About \n
\n\n \n
\n \n When is the event? \n \n \n
\n\n \n
\n \n
\n \n
\n \n
\n \n
\n )}\n \n }\n name=\"eventLocation\"\n control={control}\n rules={{\n required: `${t('eventLocation')} ${t('isRequired')}`,\n }}\n />\n \n Event location \n {}} value=\"\">\n {({ getInputProps, suggestions, getSuggestionItemProps }) => (\n
\n \n \n {suggestions.map(suggestion => {\n const className = suggestion.active ? 'suggestion-item--active' : 'suggestion-item'\n\n const style = suggestion.active\n ? {\n backgroundColor: '#f2f2f2',\n cursor: 'pointer',\n padding: '5px 10px',\n }\n : {\n backgroundColor: '#ffffff',\n cursor: 'pointer',\n padding: '5px 10px',\n }\n return (\n \n {suggestion.description}\n
\n )\n })}\n \n
\n \n \n\n \n
\n\n \n Event organizer \n
\n \n
\n \n
\n\n \n
\n {updatingFile ? (\n \n
\n ) : (\n \n Files \n
\n \n
\n )}\n\n {updatingImage ? (\n \n
\n ) : (\n \n Image \n
\n \n
\n )}\n \n {imageUrl !== null ? (\n <>\n \n
\n \n {titleWatch} \n
\n \n
\n \n {startDate !== '' ? (\n \n {aboutWatch}\n \n
\n \n ) : (\n <>\n \n
\n ) : null}\n \n {titleWatch} \n
\n \n
\n \n {startDate !== '' ? (\n \n {aboutWatch}\n \n
\n \n )}\n \n
\n ) : null}\n \n
\n\n \n {t('about')} \n
\n\n {updatingImage ? (\n \n
\n ) : (\n \n {t('image')} \n
\n \n setUpdatingImage(!updatingImage)} />\n
\n )}\n \n
\n\n \n {t('title')} \n\n
\n\n \n
\n \n {t('description')} \n\n
\n\n \n
\n \n {t('careToComment')} \n
\n\n \n
\n ![\"Youtube\"](\"/youtube.png\")
\n \n
\n\n \n {t('title')} \n\n
\n\n \n
\n \n {t('description')} \n\n
\n\n \n
\n \n {t('question')} \n
\n\n {questionWatch !== '' && (\n \n
\n \n
\n \n {t('title')} \n
\n \n
\n\n \n {t('link')} \n
\n\n \n
\n \n {t('description')} \n
\n\n \n
\n \n handleStepClick(e, label)} classes={{ completed: classes.completed }}>\n \n \n ))}\n \n
\n )\n}\n","import styled from 'styled-components'\nimport Spinner from 'react-bootstrap/Spinner'\nimport Col from 'react-bootstrap/Col'\nimport Container from 'react-bootstrap/Container'\nimport { MdArrowBack } from 'react-icons/md'\nimport { customMedia } from '~/styles/global'\n\nexport const CustomContainer = styled(Container).attrs({\n className: 'animated fadeIn',\n})``\n\nexport const CampaignRevisionContainer = styled.div`\n background-color: #ffffff;\n border-radius: 5px;\n padding: 0 30px 20px 30px;\n`\n\nexport const SpinnerContainer = styled.div`\n position: fixed;\n top: 50%;\n left: 50%;\n`\n\nexport const FormatsSpinnerContainer = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n height: 300px;\n`\n\nexport const CustomSpinner = styled(Spinner).attrs({\n animation: 'border',\n size: 'sm',\n})``\n\nexport const FormatColumn = styled(Col).attrs({\n md: 2,\n})`\n display: flex;\n justify-content: center;\n`\n\nexport const FormatTitleColumn = styled(Col).attrs({\n md: 3,\n})``\n\nexport const FormatTimingColumn = styled(Col).attrs({\n md: 3,\n})`\n display: flex;\n justify-content: center;\n`\n\nexport const StatusColumn = styled(Col).attrs({\n md: 2,\n})`\n display: flex;\n align-items: center;\n justify-content: center;\n`\n\nexport const ActionsColumn = styled(Col).attrs({\n md: 2,\n})`\n display: flex;\n justify-content: center;\n align-items: center;\n`\n\nexport const Subtitle = styled.p`\n margin: 0px;\n width: 66%;\n color: #635b5b;\n font-family: Lato;\n font-size: 15px;\n font-weight: 400;\n line-height: 15px;\n padding: 0px 15px 5px 15px;\n`\n\nexport const PageContainer = styled.div`\n width: auto;\n background-color: #fff;\n border-radius: 10px;\n padding-bottom: 15px;\n`\n\nexport const CommunityContainer = styled.div`\n display: flex;\n margin-left: 10px;\n`\n\nexport const CommunityInformationsContainer = styled.div`\n padding: 35px 0px 20px 0px;\n display: flex;\n justify-content: space-between;\n border-bottom-width: 1px;\n border-bottom-color: rgba(214, 214, 214, 0.3);\n border-bottom-style: solid;\n\n ${customMedia.lessThan('1430px')`\n flex-direction: column;\n justify-content: center;\n padding: 35px 0px 40px 0px;\n `}\n`\n\nexport const CommunityInformations = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n`\n\nexport const CommunityLogo = styled.img`\n border-radius: 100px;\n width: 74px;\n height: 74px;\n`\n\nexport const CampaignFormatsTitleContainer = styled.div`\n margin-top: 20px;\n`\n\nexport const CommunityNameAndLocationSection = styled.div`\n margin-top: 6px;\n span {\n font-size: 18px;\n width: 100%;\n }\n`\nexport const CommunityLocation = styled.p`\n margin: 0px;\n color: var(--text-primary);\n font-family: Lato;\n font-size: 14px;\n font-weight: 400;\n margin-top: -6px;\n`\n\nexport const CampaignManagementContainer = styled.div`\n display: flex;\n align-items: center;\n padding-top: 10px;\n`\n\nexport const HeaderContainer = styled.div`\n display: flex;\n flex-direction: column;\n background-image: linear-gradient(to right, #00a2ff 40%, #0090de 100%);\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n height: 220px;\n padding: 0 15px;\n`\n\nexport const HeaderBackContainer = styled.div`\n cursor: pointer;\n display: flex;\n align-items: center;\n`\n\nexport const HeaderRouteText = styled.p`\n margin: 0px;\n color: #fff;\n font-family: Roboto;\n font-size: 16px;\n font-weight: bold;\n text-transform: uppercase;\n margin-left: 10px;\n letter-spacing: 0.5px;\n`\n\nexport const HeaderBackText = styled.p`\n margin: 0px;\n color: #fff;\n font-family: Roboto;\n font-size: 18px;\n font-weight: bold;\n text-transform: uppercase;\n margin-left: 6px;\n`\n\nexport const HeaderVerticalLine = styled.p`\n margin: 0px;\n border-left: 2px solid var(--sponsor-dark);\n height: 20px;\n margin-left: 18px;\n`\n\nexport const ButtonsSection = styled.div`\n display: flex;\n align-items: center;\n margin-left: 48px;\n margin-right: 16px;\n margin-bottom: 24px;\n padding: 0px 8px;\n`\n\nexport const CampaignInformations = styled.div`\n width: 100%;\n display: flex;\n justify-content: space-between;\n\n ${customMedia.lessThan('1430px')`\n margin-top: 24px;\n `}\n`\n\nexport const CampaignContainer = styled.div`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n`\n\nexport const CampaignBudgetContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n`\n\nexport const CampaignInformationTitle = styled.p`\n margin: 0px;\n color: #635b5b;\n font-family: Lato;\n font-size: 15px;\n padding: 0px 15px 0px 15px;\n`\n\nexport const CampaignInformationSubtitle = styled.p`\n margin: 0px;\n color: #484848;\n font-family: Lato;\n font-size: min(1.4vw, 23px);\n font-weight: 700;\n`\n\nexport const CampaignInformationYear = styled(CampaignInformationSubtitle)`\n font-size: min(1.4vw, 16px);\n position: absolute;\n bottom: 10px;\n\n ${customMedia.lessThan('1430px')`\n bottom: -20px;\n `}\n`\n\nexport const SearchInputContainer = styled.div`\n margin: 20px 0px 0px 0px;\n display: flex;\n justify-content: space-between;\n border-bottom-width: 1px;\n border-bottom-color: rgba(214, 214, 214, 0.3);\n border-bottom-style: solid;\n padding-bottom: 35px;\n`\n\nexport const ButtonContainer = styled.div`\n display: flex;\n margin-right: 10px;\n`\n\nexport const BodyContainer = styled.div`\n padding: 40px 0px 10px 0px;\n`\n\nexport const ProductsTabContainer = styled.div`\n margin-top: 30px;\n`\n\nexport const GridTitleContainer = styled.div`\n display: flex;\n margin-bottom: 15px;\n align-items: center;\n justify-content: center;\n`\n\nexport const GridTitle = styled.p`\n margin: 0px;\n color: var(--sponsor-dark);\n font-family: Roboto;\n font-size: 13px;\n font-weight: bold;\n text-transform: uppercase;\n padding-left: ${props => (props.margin ? '20px' : '0px')};\n`\n\nexport const ProgressBarsContainer = styled.div.attrs({\n className: 'animated fadeIn',\n})`\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n flex-wrap: wrap;\n margin-top: 24px;\n`\n\nexport const PopoverContent = styled.div`\n width: 200px;\n padding: 8px 14px 14px 14px;\n`\n\nexport const BorderContainer = styled.div`\n margin-top: 10px;\n`\n\nexport const ProductsContainer = styled.div`\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 8px;\n transition: background-color 0.3s;\n &:hover {\n background-color: #f2f2f2;\n }\n`\n\nexport const ProductTitle = styled.span`\n color: #737475;\n font-family: Roboto;\n font-size: 14px;\n`\n\nexport const BackIcon = styled(MdArrowBack).attrs({\n size: 25,\n color: '#FFF',\n})``\n\nexport const StepContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 22px;\n`\n\nexport const StepContainerTitle = styled.p`\n color: #ffffff;\n font-family: Montserrat;\n font-size: 26px;\n text-transform: uppercase;\n font-weight: bold;\n`\n\nexport const CampaignName = styled.div`\n margin-top: 2px;\n max-width: 200px;\n word-break: normal;\n color: var(--sponsor-primary);\n font-family: Lato;\n font-size: 17px;\n font-weight: 700;\n line-height: 22px;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n`\n\nexport const CampaignNameLabel = styled.div`\n max-width: 200px;\n word-break: normal;\n color: #47525e;\n font-family: Lato;\n font-size: 17px;\n font-weight: 700;\n line-height: 18px;\n`\n\nexport const CommunityName = styled.p`\n margin: 0px;\n color: var(--community-primary);\n font-family: Lato;\n font-size: 17px;\n font-weight: 600;\n letter-spacing: 0.5px;\n width: 12vw;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n`\n\nexport const CommunityNameLabel = styled.p`\n margin: 0px;\n margin-top: 6px;\n max-width: 200px;\n word-break: normal;\n color: #47525e;\n font-family: Lato;\n font-size: 17px;\n font-weight: 700;\n line-height: 18px;\n`\n\nexport const MonthTabContainer = styled.div`\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 6px;\n padding-bottom: 24px;\n`\n\nexport const MonthTab = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n font-size: 20px;\n font-weight: bold;\n font-family: 'Roboto', sans-serif;\n max-width: 120px;\n min-width: 90px;\n height: 44px;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n background-image: ${props => (props.isActive ? '#FFF' : 'linear-gradient(to right, #00A2FF 50%, #0090de 100%)')};\n box-shadow: 0px -2px 4px 0px #c5cad3;\n box-shadow: 0px -2px 4px 0px rgb(0, 0, 0, 0.15);\n color: ${props => (props.isActive ? '#272727' : '#FFF')};\n transition: all 400ms ease;\n\n &:active {\n position: relative;\n top: 2px;\n }\n`\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useState, useEffect, useCallback, useMemo } from 'react'\nimport { every } from 'lodash'\nimport { useSelector } from 'react-redux'\nimport { useTranslation } from 'react-i18next'\nimport ZeroRegisterIndicator from '~/components/ZeroRegisterIndicator'\nimport { DefaultLogoImage } from '~/util/defaultImages'\nimport { getFormattedDatesWithYear } from '~/helper/getFormattedDates'\nimport CampaignReviewTabCard from '~/pages/Sponsor/containers/CampaignReviewTabCard'\nimport ShouldRender from '~/components/ShouldRender'\nimport TabTitleAndSubtitle from '~/components/Community/TabTitleAndSubtitle'\nimport FormatsProgressBar from '~/components/FormatsProgressBar'\nimport useCampaignFunctions from '~/helper/campaignFunctions'\nimport ModalInformationAfterFormatCreation from '~/components/Sponsor/Modals/ModalInformationAfterFormatCreation'\nimport StepCampaignReviewPage from '~/pages/Sponsor/containers/StepCampaignReviewPage'\nimport { getCurrentCampaignAndReloadThePage, getCampaignsFormatsPerMonth } from '~/services/requests'\nimport { getCampaignCurrency, currencyFormat } from '~/helper/helperFunctions'\nimport useSponsorFunctions from '~/helper/sponsorFunctions'\nimport * as CHAT from '~/helper/chatFunctions'\nimport * as FN from '~/helper/formFunctions'\nimport * as S from './styled'\n\nexport default function CampaignReviewPage({ backToCommunityPage, campaign }) {\n const { t } = useTranslation()\n const { setCampaignCurrentSelectedMonthAction, setCampaignCurrentSelectedYearAction } = useSponsorFunctions()\n\n const {\n community: { fullName: communityName, networkLogo: communityLogo } = {},\n budget: campaignBudget,\n name: campaignName,\n dtStart: campaignStartDate,\n dtEnd: campaignEndDate,\n id: campaignId,\n networkId: communityId,\n companyId,\n campaignProducts,\n currency,\n } = campaign || {}\n\n const CF = useCampaignFunctions()\n const [isLoadingCampaign, setIsLoadingCampaign] = useState(false)\n const [budgetAlreadyAlocated, setBudgetAlreadyAlocated] = useState(0)\n\n const dates = useMemo(() => {\n if (!!campaignStartDate && !!campaignEndDate) {\n return getFormattedDatesWithYear(campaignStartDate, campaignEndDate)\n }\n\n return null\n }, [campaignStartDate, campaignEndDate])\n\n const campaignStartingDate = dates?.start?.dateFormatted\n const startYear = dates?.start?.year\n const campaignEndingDate = dates?.end?.dateFormatted\n const endYear = dates?.end?.year\n\n const showModalInformationAfterFormatCreation = useSelector(\n state => state.createCampaign.showModalAfterFormatCreation,\n )\n const callbackUpdateCampaign = useSelector(state => state.createCampaign.callbackUpdateCampaign)\n const [currentMonth, setCurrentMonth] = useState(!campaign?.months ? null : campaign?.months[0]?.month)\n const [currentYear, setCurrentYear] = useState(!campaign?.months ? null : campaign?.months[0]?.year)\n\n const [data, setData] = useState(null)\n const [isLoading, setIsLoading] = useState(true)\n\n const getCampaignsFormats = useCallback(async () => {\n setIsLoading(true)\n const response = await getCampaignsFormatsPerMonth(currentMonth, campaignId, currentYear)\n setData(response)\n setIsLoading(false)\n }, [currentMonth, callbackUpdateCampaign])\n\n useEffect(() => {\n getCampaignsFormats()\n }, [getCampaignsFormats])\n\n const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\n const getMonthShortName = month => {\n const monthShortName = months[month - 1]\n return monthShortName\n }\n\n const handleClickMonthTab = (month, year) => {\n setCurrentMonth(month)\n setCurrentYear(year)\n }\n\n const checkForEmptyProductsArray = testArray => every(testArray, product => product.unities.length === 0)\n\n useEffect(() => {\n if (data) {\n CF.setCampaignDatesForCurrentMonthAction(data[0]?.startDate, data[0]?.endDate)\n }\n }, [data])\n\n useEffect(() => {\n if (currentMonth) {\n setCampaignCurrentSelectedMonthAction(currentMonth)\n setCampaignCurrentSelectedYearAction(currentYear)\n }\n }, [currentMonth])\n\n useEffect(() => {\n FN.calculateBudgetAlreadyAlocated(campaignProducts, setBudgetAlreadyAlocated)\n }, [campaignProducts])\n\n useEffect(() => {\n getCurrentCampaignAndReloadThePage(campaignId, CF.setCurrentCampaignForReviewPageAction, setIsLoadingCampaign)\n CF.closeInformationModalAfterFormatCreationAction()\n }, [])\n\n useEffect(() => {\n CHAT.getSpecificChannelId(communityId, CF.setCommunitySponsorDirectChannelIdAction, companyId)\n }, [communityId, companyId])\n\n useEffect(() => {\n if (!campaign) {\n CF.setShowCampaignReviewPageAction(false)\n CF.setCurrentCampaignForReviewPageAction(null)\n }\n }, [campaign])\n\n return isLoadingCampaign ? (\n {label}
\n \n\n {`${t('engaged')}`}\n
{`${communityCurrencySymbol} ${currencyFormat(previousValue)}`}
\n \n ) : (\n <>\n {t('previousValueFrom', { days })}\n{`${previousValue} ${t(title)}`}
\n \n )\n }\n placement=\"top\"\n arrow\n >\n\n
\n \n\n {community.name}
\n\n\n \n \n \n {community !== null && community.description ? community.description : null}\n \n
\n {mainHeroData.title}
\n{mainHeroData.subtitle}
\n{mainHeroData.community.title}
\n{mainHeroData.community.description}
\n{mainHeroData.sponsor.title}
\n{mainHeroData.sponsor.description}
\n{mainHeroData.dataSolutions.title}
\n{mainHeroData.community.title}
\n{mainHeroData.community.description}
\n \n\n{mainHeroData.sponsor.title}
\n{mainHeroData.sponsor.description}
\n \n\n{mainHeroData.dataSolutions.title}
\n•
\n\nexport const Principles = () => {\n return (\nIdentity, collaboration and simplified management: three principles to support your community
\nDigital is your future in terms of members engagement as well as monetization.
\n\n\n Your community needs innovation in order to financially survive and grow. Thanks to S.O.S (Sponsors\n Operating System) you can generate new revenues by involving your sponsors in innovative digital\n interactions with your users.\n
\n \nControl is the keyword.
\n\n\n Thanks to S.O.S (Sponsors Operating System) you will be able to select and manage your sponsors in order\n to provide your users with “meaningful” sponsored content. Finally a new way to involve your partners\n through a simplified and intuitive approach.\n
\nA full set of simple and intuitive features is waiting for you:
\n\n{text}
\nAs sponsor you get better R.O.I.
\nCommunity
\nSponsor
\nWe create opportunities by training your teams!
\nOur model represents a great way to involve young generations and digital people in your community.
\n{item.title}
\nContact us, we will be happy to talk with you
\nFeel free to ask all your questions, we will answer you as soon as possible!
\n\n
\n Thank you for your message
\n\n
\n Error, please try again later
\n\n By sending the message you agree to our\n \n {' '}\n \n terms\n {' '}\n \n and\n \n {' '}\n \n privacy policy\n \n \n
\n \nForm submitted successfully!
}\n {isError &&There was an error submitting the form. Please try again.
}\n{errors.currency && t('defaultValidation', { inputName: t('currency') })}
\n\n setZoom(zoom)}\n />\n \n setRotation(rotation)}\n />\n \n
\n \n )}\n \n \n setOpenDialogDeletePhoto(true)}>{t('deletePhoto')} \n
\n \n
\n \n setZoom(zoom)}\n />\n \n setRotation(rotation)}\n />\n \n
\n \n )}\n \n \n setOpenDialogDeletePhoto(true)}>{t('deletePhoto')} \n
\n \n
\n \n
\n\n \n {t('title')} \n
\n\n \n
\n \n {t('description')} \n\n
\n\n \n
\n \n
\n\n \n {t('title')} \n
\n\n \n
\n \n {t('description')} \n\n
\n\n \n
\n \n {t('careToComment')} \n
\n \n {isLoading && !approveFormatLoading && (\n \n \n )}\n {!isLoading && approveFormatLoading && (\n \n \n )}\n {!isLoading && !approveFormatLoading && (\n \n \n \n {t('back')} \n \n {t('sponsoredFormatsWaitingReview')} \n \n\n \n \n \n \n \n {companyLogo == null && \n \n {`${t('campaignName')}:`} \n {campaignName} \n {`${t('sponsor')}:`} \n {companyName} \n \n \n \n\n \n \n {t('startDate')} \n {campaignStartingDate} \n \n {startYear} \n \n \n\n \n {t('endDate')} \n {campaignEndingDate} \n \n {endYear} \n \n \n\n \n {t('budgetUsed')} \n \n {`${communityCurrencySymbol} ${currencyFormat(campaignBudget)}`}\n \n \n\n \n {t('budgetAlreadyAlocated')} \n \n {`${communityCurrencySymbol} ${currencyFormat(budgetAlreadyAlocated)}`}\n \n \n \n \n \n \n \n \n {selectedProducts.length > 0 && checkProducts() && (\n \n \n \n \n \n \n {t('formatTitle')} \n \n \n {t('type')} \n \n \n {t('formatScheduling')} \n \n \n {t('status')} \n \n \n {t('actions')} \n \n \n {!atLeastOneFormatCreated && \n \n \n\n setShowModalCampaignRequestChange(false)}\n showModal={showModalCampaignRequestChange}\n companyName={companyName}\n companyId={companyId}\n />\n \n )}\n
\n )\n}\n","import styled from 'styled-components'\nimport Modal from 'react-bootstrap/Modal'\nimport { darken } from 'polished'\nimport { customMedia } from '~/styles/global'\n\nexport const ModalCustom = styled(Modal).attrs({\n backdrop: 'static',\n keyboard: false,\n centered: true,\n})`\n .modal-dialog {\n max-width: 730px;\n }\n\n .modal-content {\n background-color: #fff !important;\n border-radius: 30px !important;\n }\n\n .modal-body {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background-color: #fff !important;\n border-radius: 30px !important;\n padding-bottom: 40px;\n }\n`\n\nexport const FadingBackground = styled.div`\n width: 100%;\n height: 180px;\n background: linear-gradient(180deg, var(--community-primary) 33.85%, rgba(255, 120, 45, 0) 100%);\n border-radius: 25px !important;\n`\n\nexport const AvatarImageContainer = styled.p`\n display: flex;\n justify-content: center;\n align-items: center;\n margin-top: 30px;\n`\n\nexport const AvatarImage = styled.img.attrs({\n src: '/tutorial-avatar.png',\n})`\n width: 147px;\n height: 147px;\n`\n\nexport const AvailableStepsContainer = styled.div`\n width: 100%;\n padding: 4rem 1.6rem;\n`\n\nexport const StepContainer = styled.div`\n display: flex;\n align-items: center;\n margin-top: ${props => (props.spacing ? '2.5rem' : '0')};\n`\n\nexport const StepTitle = styled.div`\n color: #767676;\n font-family: Roboto;\n margin: 0px;\n margin-top: 8px;\n font-weight: 700;\n font-size: 16px;\n text-align: center;\n width: 60px;\n`\n\nexport const Circle = styled.div`\n width: 20px;\n height: 20px;\n background-color: #7345e9;\n border-radius: 100%;\n margin-left: 1.8rem;\n margin-top: 6px;\n\n ${customMedia.lessThan('770px')`\n display: none\n `}\n`\n\nexport const StepDescription = styled.p`\n color: #767676;\n font-family: Roboto;\n margin: 0px;\n margin-top: 8px;\n font-size: 16px;\n margin-left: 1rem;\n width: 32.5rem;\n`\n\nexport const TutorialDescription = styled.p`\n color: #595959;\n font-family: Roboto;\n margin: 0px;\n margin-top: 8px;\n line-height: 22px;\n font-weight: 700;\n font-size: 20px;\n text-align: center;\n\n ${customMedia.lessThan('1560px')`\n font-size: 18px;\n `}\n`\n\nexport const TutorialDescriptionFirstAccess = styled.p`\n color: #595959;\n font-family: Roboto;\n width: 70%;\n margin: 0px;\n margin-top: 8px;\n line-height: 22px;\n font-weight: 700;\n font-size: 20px;\n text-align: center;\n\n ${customMedia.lessThan('1560px')`\n font-size: 18px;\n `}\n`\n\nexport const NextButton = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n font-family: Roboto;\n border-radius: 30px;\n text-align: center;\n width: 35%;\n height: 2.8rem;\n background-color: var(--community-primary);\n\n &:hover {\n background-color: ${darken(0.03, '#9671F5')};\n }\n\n &:active {\n -webkit-box-shadow: 0px 3px 0px rgba(214, 214, 214, 0.8), 0px 3px 6px rgba(0, 0, 0, 0.1);\n -moz-box-shadow: 0px 3px 0px rgba(214, 214, 214, 0.8), 0px 3px 6px rgba(0, 0, 0, 0.1);\n box-shadow: 0px 3px 0px rgba(214, 214, 214, 0.8), 0px 3px 6px rgba(0, 0, 0, 0.1);\n position: relative;\n top: 2px;\n }\n\n ${customMedia.lessThan('1560px')`\n width: 30%;\n `}\n`\n\nexport const NextText = styled.p`\n color: #fff;\n font-family: Roboto;\n margin: 0px;\n font-weight: 700;\n font-size: 21px;\n letter-spacing: 0.05em;\n line-height: 15px;\n`\n\nexport const SkipIt = styled.p`\n cursor: pointer;\n color: #767676;\n font-family: Roboto;\n text-decoration: underline;\n margin: 0px;\n margin-top: 26px;\n font-size: 16px;\n\n &:hover {\n color: ${darken(0.1, '#767676')};\n }\n\n ${customMedia.lessThan('1560px')`\n font-size: 15px;\n `}\n`\n\nexport const DontShowThisMessageAgain = styled(SkipIt)`\n margin-top: 8px;\n`\n","import React from 'react'\nimport Modal from 'react-bootstrap/Modal'\nimport { useSelector } from 'react-redux'\nimport { useTranslation } from 'react-i18next'\nimport { modalRatingStyle } from '~/helper/const'\nimport useNavigationFunctions from '~/helper/navigationFunctions'\nimport useTutorialFunctions from '~/helper/tutorialFunctions'\nimport * as S from './styled'\n\nexport default function ModalTutorialAllSteps({ handleCloseModal, showModal }) {\n const { t } = useTranslation()\n const communityFirstLoginForTheTutorial = useSelector(state => state.tutorial.communityFirstLogin)\n const { setTutorialAsActiveAction, neverShowTheTutorialAgainForTheCommunityAction } = useTutorialFunctions()\n const { setCommunityCurrentTabAction } = useNavigationFunctions()\n\n const setTutorialAsActiveAndCloseModal = () => {\n setCommunityCurrentTabAction('products')\n setTutorialAsActiveAction()\n handleCloseModal()\n }\n\n const handleNeverShowThisMessageAgainButton = () => {\n neverShowTheTutorialAgainForTheCommunityAction()\n handleCloseModal()\n }\n\n return (\n