{t('activity.did_you_complete')}
\n \n );\n};\n\nActivityCompletedModal.propTypes = {\n activityId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n activityTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n campaignActivityName: PropTypes.string.isRequired,\n campaignId: PropTypes.number.isRequired,\n campaignName: PropTypes.string.isRequired,\n onModalClosedCallback: PropTypes.func.isRequired,\n userActivityId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, // should actually be casted to a number at some point\n};\n\nexport default ActivityCompletedModal;\n","import { message, Switch } from 'antd';\nimport TextArea from 'antd/lib/input/TextArea';\nimport { Formik } from 'formik';\nimport { Form, SubmitButton } from 'formik-antd';\nimport _ from 'lodash';\nimport moment from 'moment';\nimport PropTypes from 'prop-types';\nimport React, { Fragment, useState, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Redirect } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { UserReportSchema } from '../../../admin/data/schema/shared';\nimport { track } from '../../services/analytics';\nimport { user, userReportApi } from '../../services/api';\n\nconst FormActivityContainer = styled.div`\n font-size: 14px;\n line-height: 20px;\n`;\n\nconst FormActivity = ({ campaignName, userActivity }) => {\n const { t } = useTranslation();\n\n const [redirectHome, setRedirectHome] = useState(null);\n const [userReport, setUserReport] = useState({});\n\n const { activity } = userActivity;\n const {\n starts_at,\n ends_at,\n address,\n state_abbrev,\n city,\n additional_details,\n activity_tags,\n activity_custom_fields,\n } = activity;\n\n const taggings = activity_tags.map(activity_tag => {\n return {\n tag: activity_tag.tag,\n value: false,\n };\n });\n\n const customizations = activity_custom_fields\n .filter(\n activity_custom_field => activity_custom_field.custom_field.is_user_reportable !== false,\n )\n .map(activity_custom_field => {\n return {\n custom_field: activity_custom_field.custom_field,\n value: '',\n };\n });\n\n const combinedSort = (taggings_attributes = [], customizations_attributes = []) => {\n let combinedArray = taggings_attributes.concat(customizations_attributes);\n combinedArray = _.sortBy(combinedArray, obj => {\n if (obj.tag) {\n return obj.tag.display_order ? obj.tag.display_order : 9999;\n }\n if (obj.custom_field) {\n return obj.custom_field.display_order ? obj.custom_field.display_order : 9999;\n }\n return 9999;\n });\n return combinedArray;\n };\n\n useEffect(() => {\n setUserReport({\n activity_id: userActivity.activity.id,\n campaign_id: userActivity.activity.campaign.id,\n customizations_attributes: customizations,\n reportable_id: userActivity.user.id,\n reportable_type: 'User',\n taggings_attributes: taggings,\n });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const submitReport = async formData => {\n if (!formData) {\n return;\n }\n\n let userReportBody = {\n activity_id: userActivity.activity.id,\n campaign_id: userActivity.activity.campaign.id,\n customizations_attributes: userReport.customizations_attributes.map(c => {\n return {\n custom_field_id: c.custom_field.id,\n value: c.value,\n };\n }),\n reportable_id: userActivity.user.id,\n reportable_type: 'User',\n taggings_attributes: userReport.taggings_attributes.map(ta => {\n return {\n tag_id: ta.tag.id,\n value: ta.value,\n };\n }),\n };\n\n const userReportRes = await userReportApi\n .updateOrCreateReport(\n {\n activity_id: userActivity.activity.id,\n campaign_id: userActivity.activity.campaign.id,\n },\n userReportBody,\n )\n .catch(err => {\n onSaveError();\n return;\n });\n\n if (!userReportRes || userReportRes.status !== 200) {\n onSaveError();\n return;\n }\n\n track('COMPLETED_ACTIVITY', {\n activity_id: userActivity.activity.id,\n activity_title: userActivity.activity.title,\n campaign_id: userActivity.activity.campaign.id,\n campaign_name: userActivity.activity.campaign.name,\n });\n await user.updateUserActivity(userActivity.id, { completed: true });\n await user.userActivityAddPerform(userActivity.id);\n message.success(t('idvoters.voter.outreach_report_sent'));\n setRedirectHome(true);\n };\n\n const onSwitchToggle = (selectedSlug, selectionChange) => {\n const updatedTaggings = userReport.taggings_attributes.map(tagging => {\n if (tagging.tag.slug !== selectedSlug) {\n return tagging;\n }\n return {\n ...tagging,\n value: selectionChange,\n };\n });\n\n setUserReport({\n ...userReport,\n taggings_attributes: updatedTaggings,\n });\n };\n\n const onCustomFieldUpdate = (selectedSlug, val) => {\n const updatedFields = userReport.customizations_attributes.map(customization => {\n if (customization.custom_field.slug !== selectedSlug) {\n return customization;\n }\n return {\n ...customization,\n value: val,\n };\n });\n\n setUserReport({\n ...userReport,\n customizations_attributes: updatedFields,\n });\n };\n\n const onSaveError = () => {\n message.error(t('errors.submit_outreach_report'));\n };\n\n if (redirectHome) {\n return \n
\n )}\n {!!ends_at && (\n \n
\n \n {t('activity.startAt')}: {moment(starts_at).format('MMMM Do, YYYY [at] HH:mm A')}\n
\n\n
\n )}\n {!!address && (\n \n
\n \n {t('activity.endAt')}: {moment(ends_at).format('MMMM Do, YYYY [at] HH:mm A')}\n
\n\n
\n )}\n\n {!!additional_details && (\n \n
\n {t('activity.location')}
\n {!!address &&{address}
}\n {!!city &&{`${city}, ${state_abbrev}`}
}\n\n
\n )}\n\n {t('activity.additional_information')}
\n{additional_details}
\n{message}\n \n )}\n
\n e.stopPropagation()}\n onSuccess={() => messageAlert.info(t('activity.share.message_copied_to_clipboard'))}\n >\n {t('activity.share.copy')}\n \n\n {t('activity.share.share')} \n
\n \n \n \n
\n \n \n \n
\n \n \n
\n \n {\n // Prompts user to confirm completed action\n setActivityCompletedModalVisible(true);\n }}\n />\n
\n );\n }\n\n if (activityType === 'FormActivity') {\n return \n \n \n \n {t('button.join_another_campaign')}\n \n
\n Please join one to start using impactive!\n
{t('auth.join.header')}
\n\n {t('auth.join.enter')}
\n {t('auth.join.dont_have_code')}
\n\n \n \n {isSubmitting ? t('auth.join.joining') : t('common.submit')}\n \n
\n \n \n {!notSmall && {children} \n \n
\n );\n};\n\nAppContainer.propTypes = {\n // eslint-disable-next-line\n children: PropTypes.any.isRequired,\n grayBackground: PropTypes.bool,\n};\n\nAppContainer.defaultProps = {\n grayBackground: false,\n};\n\nexport default AppContainer;\n","import { MenuOutlined } from '@ant-design/icons';\nimport React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { useMedia } from '../../hooks';\nimport { media } from '../../styles/theme';\n\nimport Sidebar from '../AppContainer/Sidebar';\n\nconst StyledSidebar = styled(Sidebar)`\n height: 100% !important;\n margin-right: 0 !important;\n max-width: initial !important;\n min-width: initial !important;\n width: 100% !important;\n`;\n\nconst MenuButton = styled.button`\n background-color: transparent;\n border: none;\n outline: 0;\n // We add padding so we meet a11y standards for tappable areas\n padding: 12px 16px;\n position: absolute;\n right: 0px;\n top: 7px;\n`;\n\nconst MenuWrapper = styled.nav`\n ${media.ns} {\n display: none;\n }\n background-color: #fff;\n position: fixed;\n top: 61px;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 3;\n transform: translateX(${({ menuOpen }) => (menuOpen ? 0 : '-100vw')});\n transition: transform 250ms ease-out;\n`;\n\nconst StyledHamburgerMenu = styled.div`\n ${media.ns} {\n display: none;\n }\n`;\n\nfunction HamburgerMenu() {\n const notSmall = useMedia('(max-width: 600px)');\n const [menuOpen, setMenuOpen] = useState(false);\n\n useEffect(() => {\n if (notSmall) {\n document.body.style.overflow = 'initial';\n } else {\n document.body.style.overflow = menuOpen ? 'hidden' : 'initial';\n }\n }, [notSmall, menuOpen]);\n\n if (!notSmall) return null;\n\n return (\n \n \n \n
\n \n
\n )}\n {!loading && (\n <>\n \n setFocused(true)}\n onBlur={() => setFocused(false)}\n $withPrefix={!!prefixIcon}\n $outlineColor={outlineColor}\n $backgroundColor={backgroundColor}\n $fontColor={fontColor}\n $isFanOut={isFanOut}\n $isSurvey={isSurvey}\n $hasError={hasError}\n {...rest}\n />\n {prefixIcon && (\n \n {prefixIcon}\n \n )}\n
\n {isFanOut ? (\n hasError && {t('campaign.onboarding.welcome')}
\n\n {t('campaign.onboarding.know_better')}
\n\n \n \n {t('common.continue')}\n \n
\n {t('campaign.onboarding.welcome')}
\n {campaign?.instructions_video_url && (\n \n )}\n\n
\n {t('campaign.onboarding.welcome')}
\n{t('campaign.onboarding.answer_questions', { name: campaign?.name })}
\n\n {screen === USER_DETAIL_SCREEN ? (\n
\n \n \n {passwordlessButtonText}\n \n\n (\n \n {Google()} {t('auth.auth_modal.continue_with_google')}\n \n )}\n />\n
\n );\n};\n\nAuthMenu.propTypes = {\n hidePasswordLessText: bool,\n includeOrBreak: bool,\n includePasswordOption: bool,\n onEmailLogIn: func,\n onGoogleLogin: func,\n onPasswordlessLogin: func,\n passwordlessButtonText: string,\n passwordlessExplainText: string,\n};\n\nAuthMenu.defaultProps = {\n hidePasswordLessText: false,\n includeOrBreak: true,\n includePasswordOption: true,\n passwordlessButtonText: 'Sign in with Email',\n passwordlessExplainText: null, //t('auth.auth_modal.one_time_link')\n};\n\nexport default AuthMenu;\n","import PropTypes from 'prop-types';\nimport React, { useCallback, useContext, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useHistory, useParams } from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport { useDocumentTitle } from '../../hooks/useDocumentTitle';\nimport { track } from '../../services/analytics';\nimport { users } from '../../services/api';\nimport { AuthContext } from '../../utils/context';\nimport Loading from '../common/Loading';\nimport { setAppLanguage } from '../i18n';\nimport ImpactiveOrCampaignLogo from './Components/ImpactiveOrCampaignLogo';\nimport PoweredByImpactive from './Components/PoweredByImpactive';\nimport ImpactiveButton from '../ImpactiveButton';\n\nconst LanguageContainer = styled.div`\n display: flex;\n flex-direction: column;\n gap: 1rem;\n align-items: center;\n justify-content: center;\n margin-top: 3rem;\n text-align: center;\n`;\n\nconst LanguageSelect = () => {\n const { t } = useTranslation();\n const history = useHistory();\n const { campaign_slug } = useParams();\n\n useDocumentTitle(t('auth.language.choose_language'));\n const { onboardingData, setOnboardingData, campaign, isLoading, setCampaignSlug, user, setUser } =\n useContext(AuthContext);\n\n useEffect(() => {\n // Track the page view\n track('VIEW_LANGUAGE_SELECT_SCREEN');\n setCampaignSlug(campaign_slug);\n }, [campaign_slug, setCampaignSlug]);\n\n useEffect(() => {\n // wait for all the data to be loaded\n if (isLoading) {\n return;\n }\n\n // set onboarding language if user has locale\n if (!onboardingData.language && user?.locale) {\n setAppLanguage(user?.locale);\n setOnboardingData({ ...onboardingData, language: user?.locale });\n }\n }, [isLoading, user, onboardingData, setOnboardingData]);\n\n const setLanguage = useCallback(\n language => {\n setAppLanguage(language);\n setOnboardingData({ ...onboardingData, language });\n if (user) {\n users.updateMe({ locale: language }).then(({ data }) => {\n setUser(data.data);\n });\n }\n\n if (history.location.pathname.includes('/auth/language')) {\n if (campaign_slug) {\n history.push(`/auth/signup/${campaign_slug}`);\n } else {\n history.push(`/auth/login`);\n }\n }\n },\n [campaign_slug, history, onboardingData, setOnboardingData, setUser, user],\n );\n\n if (isLoading) {\n return (\n \n {!hidePasswordLessText && (\n
\n\n {includeOrBreak && (\n \n {passwordlessExplainText || t('auth.auth_modal.one_time_link')}\n
\n )}\n {!!includePasswordOption && (\n \n
\n )}\n {t('common.or')}
\n \n {t('auth.auth_modal.with_email')}\n
\n \n \n
\n )}\n\n {t('common.or')}
\n \n \n
\n );\n }\n\n return (\n \n \n setLanguage('en')}>\n {t('auth.language.english')}\n \n setLanguage('es')}>\n {t('auth.language.spanish')}\n \n \n
\n\n {campaign && \n {t('auth.language.choose_language')}\n
\n \n
\n );\n }\n\n if (!onboardingData.language) {\n return \n
\n\n {campaign && {t('auth.sign_in_or_sign_up')}
\n\n \n
\n \n {t('auth.sign_in_with_password')}\n
\n \n
\n );\n }\n\n if (!onboardingData.language) {\n return \n
\n );\n};\n\nEmailAuthPage.propTypes = {\n isSignup: PropTypes.bool,\n};\n\nEmailAuthPage.defaultProps = {};\n\nexport default EmailAuthPage;\n","import { Button, Input } from 'antd';\nimport styled from 'styled-components';\nimport { colors, fonts } from './../../styles/theme';\n\nconst Wrapper = styled.div`\n display: block;\n margin: 0 auto;\n padding: 2em 0 1em 0;\n max-width: 420px;\n text-align: center;\n`;\n\nconst Header = styled.h2`\n text-align: center;\n color: ${colors.black};\n font-size: 1.7em;\n margin: 1em 0 1em 0;\n`;\n\nconst SubHeader = styled.h3`\n text-align: center;\n font-family: ${fonts.bold};\n font-size: 0.8em;\n text-transform: uppercase;\n color: ${colors.black};\n opacity: 0.8;\n`;\n\nconst FooterText = styled.h4`\n color: ${colors.black};\n font-size: 0.8em;\n line-height: 1.4em;\n opacity: 0.55;\n padding: 2em 4em;\n text-align: center;\n`;\n\nconst StyledInput = styled(Input)`\n && {\n background-color: transparent;\n border: none;\n border-bottom: 1px solid gray;\n border-radius: 0;\n margin: 1em 0 1em 0;\n outline: none;\n box-shadow: none !important;\n }\n`;\n\nconst StyledButton = styled(Button)`\n font-family: ${fonts.bold};\n text-transform: uppercase;\n margin: 1em 0 1em 0;\n && {\n display: block;\n font-size: 1em;\n margin-left: auto;\n margin-right: auto;\n }\n`;\n\nconst LocaleInput = styled.div`\n text-align: start;\n margin: 0.8em 0;\n`;\n\nexport { Wrapper, Header, SubHeader, FooterText, StyledInput, StyledButton, LocaleInput };\n","import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Wrapper, Header, StyledButton, StyledInput } from '../Shared';\n\nconst Confirmation = ({ onCodeSubmit }) => {\n const { t } = useTranslation();\n const [code, setCode] = useState('');\n\n const onSubmitHandler = e => {\n if (e) e.preventDefault();\n\n onCodeSubmit(code);\n };\n\n return (\n \n
\n\n {campaign && {t('auth.login')}
\n\n \n
\n\n \n
\n \n {t('auth.back')}\n
\n \n
\n );\n }\n\n if (!onboardingData.language) {\n return \n
\n );\n};\n\nPasswordlessConfirmPage.propTypes = {\n isSignup: PropTypes.bool,\n};\n\nexport default PasswordlessConfirmPage;\n","import { Input, message } from 'antd';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { track } from '../../../services/analytics';\nimport { isValidEmail } from '../../../utils/string';\nimport ImpactiveButton from '../../ImpactiveButton';\n\nconst PasswordlessAuth = ({ onSubmitClick, buttonText, isSubmitting, setIsSubmitting }) => {\n const { t } = useTranslation();\n const [email, setEmail] = useState('');\n\n // Track the page view\n useEffect(() => {\n track('VIEW_PASSWORDLESS_INPUT_SCREEN');\n }, []);\n\n const hasErrors = () => {\n // validate input, only submit for valid email addresses\n if (!isValidEmail(email)) {\n message.error(t('auth.email.invalid'));\n setIsSubmitting(false);\n return true;\n }\n\n return false;\n };\n\n const handleLogin = e => {\n track('CLICK_LOGIN');\n setIsSubmitting(true);\n e.preventDefault();\n\n if (hasErrors()) {\n return;\n }\n onSubmitClick(email);\n };\n\n return (\n \n
\n\n {campaign && {t('auth.check-your-inbox')}
\n\n {t('auth.one_time_link_sent', { email })}
\n {t('auth.click_link')}
\n\n {t('auth.didnt_get_email')}
\n\n \n \n {t('auth.resend')}\n \n
\n\n \n
\n \n {t('auth.back')}\n
\n \n
\n );\n }\n\n if (!onboardingData.language) {\n return \n
\n );\n};\n\nPasswordlessPage.propTypes = {\n isSignup: PropTypes.bool,\n};\n\nPasswordlessPage.propTypes = {};\n\nexport default PasswordlessPage;\n","import React, { useContext, useEffect } from 'react';\nimport { isMobile } from 'react-device-detect';\nimport { useTranslation } from 'react-i18next';\nimport { useHistory, useParams } from 'react-router-dom';\nimport { useDocumentTitle } from '../../hooks/useDocumentTitle';\nimport { getAndClearRedirectAfterLoginURL } from 'web/services/session';\nimport { identify } from '../../services/analytics';\nimport { auth } from '../../services/api';\nimport { AuthContext } from '../../utils/context';\nimport Loading from '../common/Loading';\nimport { setAppLanguage } from '../i18n';\nimport { ImpactiveButton } from '@admin/components/helpers/ImpactiveButtons';\nimport styled from 'styled-components';\nimport { isAuthFinished } from '@web/utils/other';\n\nconst MobileLoginWrapper = styled.div`\n padding: 4em;\n text-align: center;\n`;\n\nconst Spacer = styled.div`\n margin: 8px 0;\n`;\n\nconst ContinueLink = styled.span`\n cursor: pointer;\n :hover {\n text-decoration: underline;\n }\n`;\n\n/**\n * Magic link claim page. This is where user lands upon clicking on magic links.\n *\n * Special case: for iOS devices we render a small \"Open in Impactive App\" button so that\n * they can be redirected to use mobile app instead of being logged into Safari or other browser.\n *\n */\nconst PasswordlessTokenLoginPage = () => {\n const { t } = useTranslation();\n const history = useHistory();\n const { token } = useParams();\n const [loading, setLoading] = React.useState(true);\n\n useDocumentTitle(t('titles.sign_in'));\n const { setAuth } = useContext(AuthContext);\n\n useEffect(() => {\n if (!token) {\n history.push('/auth/login/email');\n return;\n }\n\n // This condition fixes a bug where token from path is stringified to 'null'\n // I didn't find any obvious reason why this is happening, probably a combination of race conditions\n // and route redirects all over the place that'd require further debugging.\n // Relevant issue here: https://github.com/outvote/web-app/issues/7516\n if (token === 'null') return;\n\n // Unless we are on a mobile device, proceed with login\n if (!isMobile) {\n handleToken(token);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleToken = token => {\n auth\n .verifyMagicLink(token)\n .then(res => {\n const {\n headers: { authorization: bearerHeader },\n data: { data: user },\n } = res;\n const { locale, destination, is_campaign_admin, can_admin_accounts } = user;\n\n setAuth(bearerHeader);\n setAppLanguage(locale);\n identify(user.id);\n\n const canViewAdmin = is_campaign_admin || can_admin_accounts;\n\n switch (destination) {\n case 'login':\n case 'signup':\n if (canViewAdmin) {\n window.location.href = '/admin';\n } else {\n // Fallback throw the user to /frontline\n history.push(isAuthFinished(user) ? `/frontline` : `/auth/join-campaign`);\n }\n break;\n\n // New signup flow\n case 'campaign-signup':\n history.push('/new-campaign');\n break;\n\n default:\n if (!isAuthFinished(user)) {\n history.push(`/auth/join-campaign/${destination}`);\n } else {\n // If it's none of the above, use the `redirectAfterLoginURL` or fallback to the campaign slug\n const redirectURL = getAndClearRedirectAfterLoginURL();\n history.push(redirectURL || `/campaigns/${destination}`);\n }\n break;\n }\n })\n .catch(() => {\n // Catching failed auth requests here so that they don't get reported to sentry\n // NOTE: It's fine to fail silently here because the error will be handled by the\n // axios.interceptor 401 handler that will display the \"Session expired\" message\n })\n .finally(() => setLoading(false));\n };\n\n // Use following schema/host for expo (simulator) debugging. If you want to debug on a physical device\n // you'll need to change the IP address to your local network IP address instead.\n // const hostname = \"exp://127.0.0.1:19000/--\";\n const hostname = `outvote://${document.location.hostname}`;\n\n return (\n \n
\n\n {campaign && {t('auth.auth_modal.enter_your_email')}
\n\n {t('auth.auth_modal.receive_link')}
\n\n \n
\n\n \n
\n \n {t('auth.back')}\n
\n \n {isMobile ? (\n \n \n Open in Impactive App\n \n or \n handleToken(token)}>continue in browser \n \n ) : (\n loading &&
\n );\n};\n\nPasswordlessTokenLoginPage.propTypes = {};\n\nexport default PasswordlessTokenLoginPage;\n","import { ErrorMessage, Field } from 'formik';\nimport { object, string } from 'prop-types';\nimport React from 'react';\nimport styled, { css } from 'styled-components';\n\nconst Wrapper = styled.div``;\n\nexport const Label = styled.div`\n margin-bottom: 5px;\n text-transform: uppercase;\n font-size: 0.875rem;\n ${({ theme }) => css`\n color: ${theme.colors.blue60};\n font-family: ${theme.fonts.bold};\n `}\n\n ${({ bold, theme }) =>\n bold &&\n css`\n font-weight: 600;\n text-transform: none;\n color: ${theme.colors.black};\n `}\n\n ${({ required, theme }) =>\n required &&\n css`\n ::after {\n content: '*';\n color: ${theme.colors.coral};\n }\n `}\n`;\n\nconst StyledErrorMessage = styled(ErrorMessage).attrs({ component: 'div' })`\n color: #ea5156;\n font-size: 12px;\n`;\n\nconst StyledField = styled(Field)`\n &&& {\n border: 1px solid #d9d9d9;\n border-radius: 6px;\n padding: 10px 14px 12px;\n color: ${({ theme }) => theme.colors.blue};\n width: 100%;\n height: 42px;\n background-color: transparent;\n\n &:hover {\n border: 1px solid #40a9ff;\n }\n\n &:focus-visible {\n outline: 0;\n border-right-width: 1px !important;\n border: 1px solid #40a9ff;\n box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);\n }\n }\n`;\n\nconst FormField = ({ name, value, label, placeholder, labelProps, ...rest }) => (\n \n {t('auth.existing_account_question')} Sign In\n
\n\n {t('auth.check-your-inbox')} 📩 \n \n We've sent a message to {email} with a link to activate your account.\n \n
\n - \n
- The email is in your spam folder. \n
- The email address you entered had a mistake or typo. \n
- \n You accidentally gave us another email address, like a separate work or personal\n account.\n \n
- We can't deliver to this email address due to firewalls or filtering. \n
\n
\n );\n }\n\n if (!onboardingData.language) {\n return \n
\n\n {campaign && {t('auth.join.header')}
\n\n {t('auth.join.enter')}
\n {t('auth.join.dont_have_code')}
\n\n \n \n {isSubmitting ? t('auth.join.joining') : t('common.submit')}\n \n
\n \n \n {t('common.submit')}\n \n
\n \n
\n );\n }\n\n if (!onboardingData.language) {\n return \n
\n\n {campaign && {t('auth.complete_auth.header')}
\n\n \n \n \n
\n );\n};\n\nAuth.propTypes = {\n match: PropTypes.shape({\n isExact: PropTypes.bool,\n path: PropTypes.string,\n }),\n};\n\nexport default withRouter(Auth);\n","import { string } from 'prop-types';\nimport React, { useContext } from 'react';\nimport { Redirect, Route } from 'react-router-dom';\n\nimport { AuthContext } from '../../utils/context';\nimport OnboardingModal from '../common/OnboardingModal';\n\nconst AuthenticatedRoute = props => {\n const { token } = useContext(AuthContext);\n\n const { path } = props;\n\n const isUnauthenticatedRoute = path.includes('auth');\n // don't show onboarding modal for admin campaign signup\n const isAdminCampaignSignup = path.includes('/new-campaign');\n\n if (!token && !isUnauthenticatedRoute) {\n return \n {\n // Prompts user to confirm completed action\n setActivityCompletedModalVisible(true);\n }}\n />\n
\n );\n }\n\n if (activityType === 'FormActivity') {\n return \n \n {t(`activity.types.${activity.type}`, friendlyTypeNameFor(activity.type))}\n \n {activityTitleTruncated} \n
\n \n {activityDescriptionTruncated}\n \n {dateToAge(activity.published_at)}\n {closed && ` (${t('campaign.activity.closed')})`}\n \n
\n\n \n {friendlyTypeNameFor(activity.type)} \n {activity.title} \n \n {dateToAge(activity.published_at)}\n {closed && ` (${t('campaign.activity.closed')})`}\n \n
\n\n \n \n {t('explore.zip_modal.submit')}\n \n
\n\n \n pts
\n \n
\n \n )}\n
\n );\n}\n\nTwitchEmbed.propTypes = {\n mediaUrl: PropTypes.string.isRequired,\n};\n\nTwitchEmbed.defaultProps = {};\n\nexport default TwitchEmbed;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst StyledYoutubeEmbed = styled.div`\n text-align: right;\n`;\n\nconst YoutubeContainer = styled.div`\n position: relative;\n padding-bottom: 56.25%;\n padding-top: 30px;\n height: 0;\n overflow: hidden;\n\n iframe,\n .video-container object,\n .video-container embed {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n`;\n\nfunction YoutubeEmbed({ mediaUrl }) {\n const [youtubeId, setYoutubeId] = useState(null);\n\n useEffect(() => {\n setYoutubeId(mediaUrl);\n }, [mediaUrl]);\n\n return (\n \n
\n \n scrollRef}\n >\n {campaign &&
\n \n {title} \n {children} \n
\n {actions}\n \n
\n );\n }\n\n const termsAndConditions = campaign.terms ? (\n {campaign.terms}
\n {campaign.terms_link && (\n \n {t('check_registration.read_more')}\n \n )}\n\n {t('check_registration.by_proceeding')}\n \n {t('check_registration.tos')}\n \n {'.'}\n
\n \n
\n );\n }\n\n let address,\n unit_number,\n city,\n state_abbrev,\n county_name,\n zip_code,\n mail_address,\n mail_unit_number,\n mail_city,\n mail_state_abbrev,\n mail_county_name,\n mail_zip_code;\n\n const title =\n contact.registration_status === RegistrationStatusTypes.UNREGISTERED\n ? t('confirm_address.unregistered.title')\n : t('confirm_address.title');\n\n return (\n {text1}
\n {stepDescription && (\n\n \n {contacts.map(({ id, firstName, lastName, emails }) => (\n el.email === emails[0].email)}\n toggleContact={checkboxesAvailable ? handleToggleContact : () => null}\n />\n ))}\n \n \n {!noContacts && checkboxesAvailable && (\n \n
\n );\n}\n\nGoogleContacts.propTypes = {\n decrementStep: PropTypes.func.isRequired,\n incrementStep: PropTypes.func.isRequired,\n maxHeight: PropTypes.string,\n selectedContacts: PropTypes.array.isRequired,\n setSelectedContacts: PropTypes.func.isRequired,\n step: PropTypes.number,\n type: PropTypes.string,\n};\n\nGoogleContacts.defaultProps = {\n maxHeight: '',\n step: 1,\n type: 'my',\n};\n\nexport default GoogleContacts;\n","import { CheckOutlined } from '@ant-design/icons';\nimport { Button } from 'antd';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n`;\n\nconst SyncSuccess = styled.div`\n color: ${({ theme }) => theme.colors.blue};\n margin-bottom: 15px;\n`;\n\nconst NiceWork = styled.div`\n margin-bottom: 15px;\n`;\n\nconst SyncToFrontline = styled.div`\n display: flex;\n justify-content: center;\n`;\n\nconst StyledButton = styled(Button)`\n &&& {\n font-family: ${({ theme }) => theme.fonts.semibolditalic};\n }\n`;\n\nfunction ImportSuccess({ count }) {\n const { t } = useTranslation();\n return (\n {t('contact.sync.header')}
\n\n {/* Step 0 */}\n {currentStep === 0 && (\n <>\n\n {t('idvoters.results.title')} \n \n \n\n {!loading && !hasVoters && (\n \n {t('idvoters.results.no_results_message')}\n \n )}\n
\n );\n};\n\nIdVotersList.propTypes = {\n activityId: PropTypes.number,\n campaignId: PropTypes.number,\n contactId: PropTypes.number,\n isFriend: PropTypes.bool.isRequired,\n loading: PropTypes.bool.isRequired,\n onListItemClick: PropTypes.func.isRequired,\n show: PropTypes.bool.isRequired,\n userActivityId: PropTypes.number,\n voters: PropTypes.arrayOf(PropTypes.shape({})),\n};\n\nIdVotersList.defaultProps = {\n activityId: null,\n campaignId: null,\n contactId: null,\n onListItemClick: null,\n userActivityId: null,\n voters: null,\n};\n\nexport default IdVotersList;\n","import { Modal } from 'antd';\nimport PropTypes from 'prop-types';\nimport React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport styled from 'styled-components';\nimport { users } from '../../services/api';\nimport theme from '../../styles/theme';\nimport IdVotersForm from './IdVotersForm';\nimport IdVotersList from './IdVotersList';\n\nconst StyledModal = styled(Modal)``;\n\nconst HeaderAndDescription = styled.div`\n padding: 0px 16px;\n`;\n\nconst ModalContent = styled.div`\n color: ${({ theme }) => theme.colors.black};\n`;\n\nconst Header = styled.div`\n font-size: 22px;\n font-family: ${({ theme }) => theme.fonts.semibold};\n margin-bottom: 10px;\n`;\n\nconst Description = styled.div`\n font-size: 12px;\n margin-bottom: 20px;\n`;\n\n// Search the national voter file with the following parameters to find possible matches for either a contact or someone you've just met at an event\nconst IdVotersModal = ({\n contact_id,\n firstName,\n lastName,\n activityId,\n userActivityId,\n campaignId,\n setVisibleFn,\n setShowVoterMatchModal,\n setVoter,\n}) => {\n const { t } = useTranslation();\n\n // POST form to get a list of all possible voters, then navigate to search results page to select one. Could also pass the parameters to the search page and POST there since you may want to filter/sort results on the search page.\n // All fields are required\n // Keep in mind: this may be to match a user's contact or it may be to find someone who was just met or it may be used to add someone new who was just met\n const [voters, setVoters] = useState([]);\n const [loadingItems, setLoadingItems] = useState(false);\n const [searched, setSearched] = useState(false);\n\n const handleFormSubmit = async (formData, { setSubmitting }) => {\n setLoadingItems(true);\n setSearched(true);\n await users.searchVoters(formData).then(({ data }) => {\n setVoters(data);\n setSubmitting(false);\n setLoadingItems(false);\n });\n };\n\n const closeModal = () => {\n setVisibleFn(false);\n };\n return (\n <>\n - \n {hasVoters &&\n voters.map(voter => (\n
{t('common.loading')}
\n \n {/* ***************************** Voter Info **************************************** */}\n
\n \n );\n};\n\nVoterMatchCore.propTypes = {\n activityId: PropTypes.number,\n campaignId: PropTypes.number,\n contactId: PropTypes.number,\n isFriend: PropTypes.bool,\n onBadMatch: PropTypes.func,\n onSaveMatchFinally: PropTypes.func,\n redirectIfNoVoterInfo: PropTypes.bool,\n userActivityId: PropTypes.number,\n voterbaseId: PropTypes.string,\n voterParams: PropTypes.object,\n};\n\nVoterMatchCore.defaultProps = {\n redirectIfNoVoterInfo: false,\n};\n\nexport default VoterMatchCore;\n","import { Modal } from 'antd';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport styled from 'styled-components';\nimport theme from '../../styles/theme';\n\nimport VoterMatchCore from './VoterMatchCore';\n\nconst StyledModal = styled(Modal)`\n &&& {\n color: ${({ theme }) => theme.colors.black};\n }\n`;\n\nconst VoterMatchModal = ({\n contactId,\n voter: voterParams,\n voterbaseId,\n isFriend,\n userActivityId,\n activityId,\n campaignId,\n setVisibleFn,\n setShowIdVotersModal,\n}) => {\n return (\n \n \n {t('idvoters.voter.save_match')}\n \n )}\n
\n \n \n {fullName} \n \n {t('idvoters.voter.match.bad_match')}\n \n \n
\n\n {/* ***************************** Voter Tags **************************************** */}\n
\n\n {/* ***************************** Election Attendance ******************************** */}\n\n{t('idvoters.voter.recent_elections')} \n \n {votingRecords.map(\n (vote, index) =>\n // na === not old enough to vote\n vote.value !== 'na' && (\n \n {vote.title} \n \n ),\n )}\n \n {/* ***************************** /Election Attendance ******************************** */}\n\n {/* ***************************** Outreach Report ******************************** */}\n\n {!isFriend && (\n \n {({ errors, touched }) => (\n
\n\n {address}
\n\n {/* ***************************** /Voter Info **************************************** */}\n\n \n\n {/* ***************************** Voter Tags **************************************** */}\n
\n
\n\n {/* ***************************** /Voter Tags **************************************** */}\n\n \n {}}>\n {t('idvoters.voter.tags.in_district')}\n \n
\n\n {party.party && (\n \n null}>\n {party.party}\n \n
\n )}\n\n \n null}>\n {frequency}\n \n
\n \n\n {/* ***************************** Election Attendance ******************************** */}\n\n
\n \n {t('common.send_to_campaign')}\n \n
\n \n )}\n \n )}\n\n {/* ***************************** /Outreach Report ******************************** */}\n\n {isFriend && (\n \n setVisibleFn(false)}\n footer={null}\n >\n {\n setVisibleFn(false);\n setShowIdVotersModal(true);\n }}\n onSaveMatchFinally={() => setVisibleFn(false)}\n />\n \n
\n );\n};\n\nVoterMatchModal.propTypes = {\n activityId: PropTypes.number,\n campaignId: PropTypes.number,\n contactId: PropTypes.number,\n isFriend: PropTypes.bool,\n setShowIdVotersModal: PropTypes.func,\n setVisibleFn: PropTypes.func,\n userActivityId: PropTypes.number,\n voter: PropTypes.object,\n voterbaseId: PropTypes.string,\n};\n\nexport default VoterMatchModal;\n","import democratIconImage from '@assets/images/democrat-icon-active.png';\nimport frequentVoterEmoji from '@assets/images/frequent-voter-emoji.png';\nimport inDistrictIconImage from '@assets/images/in-district-icon-active.png';\nimport infrequentVoterEmoji from '@assets/images/infrequent-voter-emoji.png';\nimport republicanIconImage from '@assets/images/republican-icon-active.png';\nimport superVoterEmoji from '@assets/images/super-voter-emoji.png';\nimport inSwingIconImage from '@assets/images/swing-district-icon-active.png';\nimport unknownVoterIcon from '@assets/images/unknown-voter-icon.png';\nimport { Button, message, List } from 'antd';\nimport PropTypes from 'prop-types';\nimport React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport styled from 'styled-components';\nimport { users } from 'web/services/api';\nimport IdVotersModal from '../IdVotersActivity/IdVotersModal';\nimport VoterMatchModal from '../IdVotersActivity/VoterMatchModal';\n\nconst { Item } = List;\n\nconst ContactName = styled.div`\n padding-left: 1em;\n`;\n\nconst Flags = styled.small`\n padding-left: 2em;\n`;\n\nconst Flag = styled.span`\n padding-left: 1em;\n`;\n\nconst Checkbox = styled.input`\n margin: 1em;\n`;\n\nconst ItemContent = styled.div`\n padding-left: 10px;\n display: flex;\n`;\n\nconst StyledButton = styled(Button)`\n &&& {\n font-family: ${({ theme }) => theme.fonts.semibolditalic};\n }\n`;\n\nconst resolveFrequencyIcon = freqency => {\n const sourceByFrequency = {\n 'Frequent Voter': frequentVoterEmoji,\n 'Infrequent Voter': infrequentVoterEmoji,\n 'Never Voted': infrequentVoterEmoji,\n 'Super Voter': superVoterEmoji,\n Unregistered: infrequentVoterEmoji,\n };\n\n return sourceByFrequency[freqency] || unknownVoterIcon;\n};\n\nconst resolveAffilitationIcon = party => {\n const sourceByAffilitation = {\n Democrat: democratIconImage,\n Republican: republicanIconImage,\n };\n\n return sourceByAffilitation[party] || null;\n};\n\nconst ContactListItem = ({\n contact: {\n id,\n first_name: firstName,\n last_name: lastName,\n full_name: fullName,\n email,\n party_affiliation: party,\n voter_frequency: frequency,\n in_district: inDistrict,\n in_swing_district: inSwingDistrict,\n selected_voterbase_id: selectedVoterbaseId,\n invited: _invited,\n },\n hideCheckbox,\n onClickHandler,\n selected = false,\n withSelection = false,\n noLabels = false,\n}) => {\n const { t } = useTranslation();\n const [invited, setInvited] = useState(_invited);\n const [showIdVotersModal, setShowIdVotersModal] = useState(false);\n\n const [showVoterMatchModal, setShowVoterMatchModal] = useState(false);\n const [voter, setVoter] = useState(null);\n\n const handleRecruitClick = async () => {\n if (!invited) {\n await users\n .sendInvite(id)\n .then(res => {\n setInvited(true);\n })\n .catch(() => {\n message.error(t('contacts.failed_to_invite'));\n });\n }\n };\n\n // When a contact is clicked that does not have a match we go to the IdVoter screen\n // to search for them with prefilled name parameters\n const SearchButton = (\n \n {t('contacts.description')} \n
\n\n {!userNotSynced && (\n \n {t('contacts.title')} \n {!userNotSynced && (\n setSyncContactsModalVisible(true)}>\n {t('contacts.resync')}\n \n )}\n
\n \n {(token && contactsPaginator.initialLoading) ||\n (contactsPaginator.items && contactsPaginator.items.length > 0 && (\n setContactsScrollRef}\n >\n
\n - \n {contactsPaginator.items.map((contact, ix) => (\n
\n \n {connectedContact?.state_abbrev || 'Unknown State'} |{' '}\n {connectedContact?.party_affiliation || 'Unknown Party Affiliation'}\n \n {connectedContact && activity?.presented_contact_details.map(renderDetail)}\n
\n \n {customFields.map(el => (\n
\n );\n}\n\nCustomFieldList.propTypes = {\n answers: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n value: PropTypes.string,\n }),\n ),\n customFields: PropTypes.arrayOf(\n PropTypes.shape({\n available_values: PropTypes.array,\n id: PropTypes.number.isRequired,\n prompt: PropTypes.string.isRequired,\n }),\n ),\n handleAnswerChange: PropTypes.func.isRequired,\n};\n\nCustomFieldList.defaultProps = {};\n\nexport default CustomFieldList;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport { Switch } from 'antd';\n\nconst Label = styled.p`\n margin-bottom: 0.25rem;\n`;\n\nconst StyledTag = styled.div`\n margin: 1rem 0;\n`;\n\nconst StyledTagsList = styled.ul`\n margin: 0;\n padding: 0;\n`;\n\nfunction TagsList({ answers, handleAnswerChange, tags }) {\n function changeHandler(el, value) {\n handleAnswerChange('tag', { ...el, value });\n }\n\n function getValue(id) {\n return answers.find(el => el.id === id)?.value || false;\n }\n\n if (!tags?.length) {\n return null;\n }\n\n return (\n {renderComponent(el)}
\n ))}\n \n Do you need to edit your answers?\n
\n {t('404.not_found')}\n
\n {t('404.return_home')}\n\n {renderScroll && (\n scrollRef}\n >\n \n {loading && \n \n )}\n {!renderScroll && setSelectedAction(null)}\n userActivity={selectedAction}\n visible={!!selectedAction}\n />\n
\n );\n};\n\nActivityList.propTypes = {\n hasMore: PropTypes.bool.isRequired,\n initialLoading: PropTypes.bool.isRequired,\n items: PropTypes.array,\n loading: PropTypes.bool.isRequired,\n loadMore: PropTypes.func.isRequired,\n};\n\nexport default ActivityList;\n","import isEqual from 'lodash/isEqual';\nimport PropTypes from 'prop-types';\nimport React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport styled from 'styled-components';\nimport { usePaginatedApi, toObject } from '../../hooks/usePaginatedApi';\nimport { user } from '../../services/api';\nimport PinnedActivityCarousel from '../Activity/PinnedActivityCarousel';\nimport RecentlyParticipatedActionsCarousel from '../Activity/RecentlyParticipatedActionsCarousel';\nimport ActivityFilters from '../common/ActivityFilters';\nimport ActivityList from './ActivityList';\n\nimport ListEmpty from './ListEmpty';\nimport { useSelector } from 'react-redux';\nimport { AuthContext } from '@web/utils/context';\n\nconst StyledListController = styled.div`\n margin-bottom: 3rem;\n`;\n\nconst ListWrapper = styled.div`\n & + & {\n margin-top: 2rem;\n }\n`;\n\nconst Title = styled.div`\n color: ${({ theme }) => theme.colors.black};\n font-family: ${({ theme }) => theme.fonts.semibold};\n font-size: 2rem;\n`;\n\nfunction ListController({ charityList, ...rest }) {\n const { user: userData } = useContext(AuthContext);\n const campaign = useSelector(state => state.oneCampaign.selectedCampaign);\n const { t } = useTranslation();\n // Activity filters\n const [filters, setFilters] = useState({\n activity_type: undefined,\n cause: undefined,\n zip: undefined,\n });\n\n const [pinnedActions, setPinnedActions] = useState(null);\n\n const loadPinnedActions = useCallback(() => {\n user\n .getUserActivities({\n campaign_id: campaign?.id,\n pinned: true,\n })\n .then(({ data: { data } }) => setPinnedActions(data));\n }, [campaign.id]);\n\n // Handle initial data fetching\n useEffect(() => {\n loadPinnedActions();\n // eslint-disable-next-line\n }, [loadPinnedActions]);\n\n // Activity paginated data\n const { hasMore, initialLoading, items, loadMore, loading, resetPagination } = toObject(\n usePaginatedApi(user.getUserActivities, null, {\n campaign_id: campaign?.id,\n ...filters,\n }),\n );\n\n useEffect(() => {\n resetPagination({ refetch: true });\n // Do not change this as it will cause queries to loop\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [campaign.id]);\n\n const filteredItems = useMemo(\n () =>\n (\n items?.filter(\n item => !(item?.activity?.aasm_state && item?.activity?.aasm_state === 'draft'),\n ) || []\n )\n // If a specific language is selected for an activity, we need to check if it matches the language selected by the user\n .filter(item => !item.activity?.locale || item.activity?.locale === userData?.locale),\n [userData?.locale, items],\n );\n\n const onlyActionItems = useMemo(\n () =>\n filteredItems.filter(\n item =>\n ![\n 'UserBroadcastActivity',\n 'IdVotersActivity',\n 'AssignedCanvassingActivity',\n 'RegistrationActivity',\n ].includes(item?.activity?.type),\n ),\n [filteredItems],\n );\n const recentlyParticipatedItems = onlyActionItems.filter(item => item.completed);\n\n const renderPinned = pinnedActions?.length > 0;\n const renderLatest = items?.length > 0;\n const renderRecentlyParticipated = recentlyParticipatedItems.length > 0;\n\n const onFilterChangeHandler = useCallback(\n newFilters => {\n if (!isEqual(filters, newFilters)) {\n setFilters(newFilters);\n resetPagination({ refetch: true });\n }\n },\n [filters, resetPagination],\n );\n\n return (\n <>\n {terms}
\n {termsLink && (\n \n {t('check_registration.read_more')}\n \n )}\n\n {t('ga_runoff.by_clicking_submit')}\n \n {t('ga_runoff.tos')}\n \n {'.'}\n
\n \n
\n );\n }\n\n const shouldRedirect = campaign && !campaign.ga_runoff_enabled;\n if (shouldRedirect) {\n return \n
\n
\n \n \n
*/}\n \n Helpful Links \n
\n \n
\n );\n }\n\n const shouldRedirect = campaign && !campaign.ga_runoff_enabled;\n if (shouldRedirect) {\n return \n {t('hq.complete_actions_to_receive', {\n actionOrActions: toNextRank === 1 ? t('hq.action') : t('hq.action_plural'),\n toNextRank: toNextRank,\n })}\n
\n \n {t('hq.actions_completed', {\n completed: toComplete - toNextRank,\n toComplete: toComplete,\n })}\n
\n \n )}\n \n {loading &&
\n \n {children}\n
\n \n
\n
\n \n \n \n {t('hq.title')} \n \n \n setShowEditModal(true)}\n />\n \n \n {/* Not ready on the backend side\n {!teamsLoading && \n \n
\n );\n};\n\nHq.propTypes = {};\n\nexport default Hq;\n","import React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useLocation, useHistory } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { useDocumentTitle } from '../../hooks/useDocumentTitle';\nimport { users } from '../../services/api';\nimport AppContainer from '../AppContainer';\nimport AppHeader from '../AppHeader';\nimport BackButton from '../common/BackButton';\nimport IdVotersForm from './IdVotersForm';\nimport IdVotersList from './IdVotersList';\n\nconst HeaderAndDescription = styled.div`\n padding: 0px 16px;\n`;\nconst Header = styled.div`\n font-size: 22px;\n font-family: ${({ theme }) => theme.fonts.semibold};\n margin-bottom: 10px;\n`;\n\nconst Description = styled.div`\n font-size: 12px;\n margin-bottom: 20px;\n`;\n\n// Search the national voter file with the following parameters to find possible matches for either a contact or someone you've just met at an event\nconst IdVoters = () => {\n const { t } = useTranslation();\n const { state } = useLocation();\n const history = useHistory();\n const { contact_id, firstName, lastName, activityId, userActivityId, campaignId } = state || {};\n useDocumentTitle(t('titles.idvoters'));\n\n // POST form to get a list of all possible voters, then navigate to search results page to select one. Could also pass the parameters to the search page and POST there since you may want to filter/sort results on the search page.\n // All fields are required\n // Keep in mind: this may be to match a user's contact or it may be to find someone who was just met or it may be used to add someone new who was just met\n const [voters, setVoters] = useState([]);\n const [loadingItems, setLoadingItems] = useState(false);\n const [searched, setSearched] = useState(false);\n\n const handleFormSubmit = async (formData, { setSubmitting }) => {\n setLoadingItems(true);\n setSearched(true);\n await users.searchVoters(formData).then(({ data }) => {\n setVoters(data);\n setSubmitting(false);\n setLoadingItems(false);\n });\n };\n\n const isFriend = !!contact_id;\n const contactId = contact_id;\n const pushToVoterView = voter => {\n history.push({\n pathname: '/voter/view',\n state: {\n activityId,\n campaignId,\n contactId,\n isFriend,\n userActivityId,\n voter,\n voterbaseId: voter?.voterbase_id,\n },\n });\n };\n\n return (\n <>\n \n \n {t('idvoters.header')} \n {t('inbox.report.description')} \n \n
\n \n
\n \n
\n {step.instructions}
\n - \n {contact.reg_confirmed && contact.vbm_confirmed && (\n <>\n
- \n {(contact.registration_status === RegistrationStatusTypes.UNREGISTERED ||\n contact.registration_status === RegistrationStatusTypes.WRONG_ADDRESS) &&\n contact.reg_confirmed &&\n contact.can_register_online &&\n (contact.reg_state === RegStateTypes.NOT_SENT ||\n contact.reg_state === RegStateTypes.UNABLE_REGISTER_ONLINE) && (\n
\n {t('inbox.archive_conversation_question')}\n\n \n ON \n OFF \n \n
\n {t('inbox.archive_conversation')}\n {contactEmail}
\n {text}
\n\n \n
\n \n \n );\n};\n\nexport default NewVoterReport;\n","import styled from 'styled-components';\nimport ImpactiveButton from 'web/components/ImpactiveButton';\n\nexport const OptInForm = styled.div`\n align-items: center;\n background: #f4f5f6;\n color: #000;\n display: flex;\n flex: 1;\n flex-direction: column;\n font-size: 1.5rem;\n height: 100%;\n justify-content: center;\n padding: 3rem;\n width: 100%;\n`;\n\nexport const InitialContainer = styled.div`\n align-items: center;\n background: #fff;\n border-radius: 10px;\n display: flex;\n flex-direction: column;\n`;\n\nexport const OptInImg = styled.img`\n display: block;\n max-width: 512px;\n max-height: 512px;\n`;\n\nexport const Title = styled.h1`\n max-width: 512px;\n padding-top: 2rem;\n text-transform: uppercase;\n text-align: center;\n`;\n\nexport const Subtitle = styled.div`\n max-width: 512px;\n padding-bottom: 2rem;\n text-align: center;\n`;\n\nexport const OptInButton = styled(ImpactiveButton)`\n font-size: 1.8rem;\n text-transform: uppercase;\n max-width: 512px;\n`;\n\nexport const Disclaimer = styled.div`\n color: $gray-800;\n font-size: 1.2rem;\n max-width: 512px;\n padding-top: 3.125rem;\n text-align: center;\n`;\n\nexport const DisclaimerLink = styled.a`\n color: $gray-800;\n font-size: 1.2rem;\n max-width: 512px;\n margin-top: 1rem;\n text-align: center;\n display: block;\n`;\n\nexport const ThankYouContainer = styled.div`\n color: white;\n`;\n","import { message } from 'antd';\nimport React from 'react';\nimport Clipboard from 'react-clipboard.js';\nimport { useTranslation } from 'react-i18next';\nimport { FacebookShareButton, TwitterShareButton, FacebookIcon, TwitterIcon } from 'react-share';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst ShareButtonInner = styled.div`\n align-items: center;\n border: 1px solid;\n border-color: white;\n border-radius: 4px;\n height: 52px;\n display: flex;\n font-size: 1.5rem;\n justify-content: center;\n padding-top: 1rem;\n padding-bottom: 1rem;\n width: 100%;\n`;\n\nconst ShareButtonText = styled.div`\n padding-left: 1rem;\n`;\n\nconst StyledFacebookShareButton = styled(FacebookShareButton)`\n margin-bottom: 1.5rem;\n width: 100%;\n cursor: pointer;\n display: flex;\n`;\n\nconst StyledTwitterShareButton = styled(TwitterShareButton)`\n margin-bottom: 1.5rem;\n width: 100%;\n cursor: pointer;\n`;\n\nconst StyledClipboard = styled(Clipboard)`\n margin-bottom: 1.5rem;\n width: 100%;\n cursor: pointer;\n`;\n\nexport const FacebookShare = ({ url, children }) => (\n \n
\n \n \n
\n\n \n
\n \n {t('common.send_to_campaign')} \n
\n \n \n \n
\n );\n }\n\n const shouldRedirect = campaign && campaign.broadcast_disabled;\n if (shouldRedirect) {\n return \n \n {'Terms of Service'}\n \n \n {'Privacy Policy'}\n \n
\n )}\n \n {form.title} \n {form.subtitle} \n (\n \n )}\n />\n
\n )}\n\n {screenType === ScreenTypes.THANK_YOU && (\n \n \n {t('voting_information.share.facebook')}\n \n \n {t('voting_information.share.twitter')}\n \n \n {t('voting_information.share.copy_share_link')}\n \n
\n )}\n {campaign.terms}
\n {campaign.terms_link && (\n \n {t('check_registration.read_more')}\n \n )}\n\n {t('check_registration.by_proceeding')}\n \n {t('check_registration.tos')}\n \n {'.'}\n
\n \n
\n );\n }\n\n if (screenType === ScreenTypes.SPLASH) {\n return (\n \n \n
\n );\n};\n\nCopy.propTypes = {\n fill: string,\n};\n\nCopy.defaultProps = {\n fill: theme.colors.trueBlack,\n};\n\nexport default Copy;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\n\nfunction Share({ fill, ...props }) {\n return (\n \n );\n}\n\nShare.propTypes = {\n fill: PropTypes.string,\n height: PropTypes.number,\n};\n\nShare.defaultProps = {\n height: 14,\n};\n\nexport default Share;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Entries = ({ fullColor, fill, ...props }) => {\n return (\n \n
\n
\n
- \n {incentives.map(el => (\n
\n {submitButtonChildren && submitButtonChildren}\n {!submitButtonChildren && (\n <>\n
\n \n \n {submitButtonChildren && submitButtonChildren}\n {!submitButtonChildren && (\n <>\n
\n \n - \n
\n
\n );\n }\n\n if (error) {\n return \n {t('voting_information.at')} {info.address}\n \n );\n\n const notRegisteredText = getNotRegisteredText(info.state);\n\n const onChange = React.useCallback(\n keys => !disableCollapse && setActiveKey(keys),\n [disableCollapse],\n );\n\n const buttonColor = React.useMemo(\n () => settings?.button_color ?? vrDefaultColors.buttonColor,\n [settings?.button_color],\n );\n const bgColor = React.useMemo(\n () => settings?.background_color ?? vrDefaultColors.backgroundColor,\n [settings?.background_color],\n );\n\n const trackOfLinkClick = React.useCallback(\n url => {\n activities.trackExternalLinkClick({\n activityId: activity?.id,\n activitySlug: activity?.slug,\n campaignId: activity?.campaign?.id,\n contactId: contactFormResult?.id,\n url,\n });\n },\n [activity?.campaign?.id, activity?.id, activity?.slug, contactFormResult?.id],\n );\n\n const onRegisterClick = React.useCallback(\n e => {\n if (isFanOut) {\n amplitudeTrack({\n activity,\n name: referralHash\n ? 'FAN_OUT_REGISTER_TO_VOTE_CLICK_REFERRED'\n : 'FAN_OUT_REGISTER_TO_VOTE_CLICK',\n team,\n });\n }\n trackOfLinkClick(getButtonLink());\n e.stopPropagation();\n },\n [isFanOut, activity, team, referralHash, getButtonLink, trackOfLinkClick],\n );\n\n const RegisterButton = React.useMemo(\n () =>\n !registered && (\n
\n
\n );\n }\n\n return (\n \n {rest}\n
{t('fan_out.voting_plan.results.note')}
\n \n
\n );\n }\n return (\n \n
\n \n \n {t('check_registration.headcount.findYourPolling')}\n \n \n
\n )}\n\n \n \n \n {t('check_registration.headcount.votingDatesMoreInfo', {\n info: 'voting',\n state: stateName,\n })}\n \n \n
\n\n {votingInfo?.county_election_info && (\n \n \n \n {t('check_registration.headcount.lookUpCountry')}\n \n \n
\n )}\n {'No voter registration required. Go to your polling site with a valid ID.'}
\n )}\n- \n {showVBMAsMain && vbmListItem()}\n {isAutomaticVBMState && vbmListItem('automaticVbmItem')}\n
\n
\n );\n }\n\n function openVoterModal() {\n setShowVoterModal(true);\n }\n\n function openReferralModal() {\n setShowReferralModal(true);\n }\n\n function closeModal() {\n setShowReferralModal(false);\n setShowVoterModal(false);\n if (start !== '1') {\n dispatch(init());\n }\n }\n\n const mediaUrl = activity.public_join_video_url || activity.media_url;\n const mediaContentType = activity.public_join_video_url ? 'video' : 'image';\n\n return (\n \n \n \n {answers.map(([key, value]) => (\n \n {value.value}\n \n ))}\n \n \n
\n );\n}\n\nRadioGroupFormPartial.propTypes = {\n activity: PropTypes.shape({\n settings: PropTypes.shape({\n form_field_background_color: PropTypes.string,\n form_field_outline_color: PropTypes.string,\n main_font_color: PropTypes.string,\n }),\n }),\n handleChange: PropTypes.func.isRequired,\n name: PropTypes.string.isRequired,\n options: PropTypes.object,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { Input } from 'antd';\nimport { StyledErrorMessage } from '@web/components/common/shared/FormInput';\nimport theme from '@web/styles/theme';\n\nconst UnderlinedInput = styled(Input)`\n &&& {\n border: 1px solid\n ${({ $outlineColor }) => $outlineColor ?? theme.formDefaultColors.fieldOutlineColor};\n border-radius: 6px;\n color: ${({ $color }) => $color ?? theme.formDefaultColors.fieldFontColor};\n background: ${({ $backgroundColor }) =>\n $backgroundColor ?? theme.formDefaultColors.fieldBackgroundColor};\n height: 40px;\n\n box-shadow: 0 0 0 30px\n ${({ $backgroundColor }) => $backgroundColor ?? theme.formDefaultColors.fieldBackgroundColor}\n inset !important;\n -webkit-box-shadow: 0 0 0 30px\n ${({ $backgroundColor }) => $backgroundColor ?? theme.formDefaultColors.fieldBackgroundColor}\n inset !important;\n\n -webkit-background-clip: text !important;\n background-clip: text !important;\n -webkit-autofill:first-line {\n color: ${({ $color }) => $color ?? theme.formDefaultColors.fieldFontColor};\n }\n\n ::placeholder {\n color: ${({ $outlineColor }) => $outlineColor ?? theme.colors.placeHolderColor};\n }\n }\n`;\n\nexport function InputFieldFormPartial({ activity, handleChange, name }) {\n const { form_field_outline_color, form_field_background_color, form_field_font_color } =\n activity.settings ?? {};\n\n return (\n <>\n \n {titleText} \n {messageText} \n
\n {speechifyAiData ? (\n \n
\n );\n }\n\n if (activity.campaign?.fan_out_registration_enabled) {\n return \n
\n );\n }\n\n // Team Survey activity\n if (activity.type === 'SurveyActivity') {\n return {t('settings.unlock.header')}
\n\n{t('settings.header')}
\n \n \n );\n};\n\nexport default UserPreferences;\n","import React from 'react';\nimport { users } from '../../services/api';\n\nfunction useHasContacts() {\n const [hasContacts, setHasContacts] = React.useState(false);\n const [loading, setLoading] = React.useState(true);\n\n React.useEffect(() => {\n users\n .getContacts()\n .then(({ data }) => {\n if (data.data.length > 0) {\n setHasContacts(true);\n }\n setLoading(false);\n })\n .catch(() => setLoading(false));\n }, []);\n\n return { hasContacts, loading };\n}\n\nexport default useHasContacts;\n","import { Button, Spin } from 'antd';\nimport React, { useContext, useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { AuthContext } from 'web/utils/context';\nimport { useDocumentTitle } from '../../hooks/useDocumentTitle';\nimport { track } from '../../services/analytics';\nimport AppContainer from '../AppContainer';\nimport AppHeader from '../AppHeader';\nimport SyncContactsModal from '../ContactSync/components/SyncContactsModal';\nimport MaxWidthContainer from '../common/MaxWidthContainer';\nimport Text from '../common/Text';\nimport Unlock from './Unlock';\nimport UserPreferences from './UserPreferences';\nimport useHasContacts from './useHasContacts';\n\nconst Settings = () => {\n const { t } = useTranslation();\n useDocumentTitle(t('titles.settings'));\n const { hasContacts, loading } = useHasContacts();\n const [syncContactsModalVisible, setSyncContactsModalVisible] = useState(false);\n const { isLockedToCampaign } = useContext(AuthContext);\n\n // Track the page view\n useEffect(() => {\n track('VIEW_SETTINGS_SCREEN');\n }, []);\n\n return (\n <>\n\n\n {isLockedToCampaign && (\n <>\n
\n \n )}\n\n
{t('contact.sync.header')}
\n\n
\n );\n }\n\n const shareNowVisible = !!navigator.share;\n const inviteSection = (\n \n \n {t('Absentee Ballot Tracker')}\n \n
\n \n \n \n {t('voting_information.cannot_early_voting_with_state', {\n state: state_abbrev,\n })}\n \n
\n \n \n {t('In Person Early Voting Rules')}\n \n
\n \n \n {t('Polling Place Locator')}\n \n
\n \n {stats}
}\n \n {team.top_members.map(user => (\n
\n )}\n \n {title} \n {description} \n\n \n {t('activity.testimonial.preview')} \n {!mediaPreview && {t('activity.testimonial.preview_description')} }\n uploadMedia(request)}\n beforeUpload={validateFile}\n onChange={handleUpload}\n >\n {mediaPreview && (\n \n )}\n \n\n {t('activity.testimonial.note')} \n setTestimonialNote(e.target.value)}\n value={testimonialNote}\n />\n\n \n {t('common.submit')}\n \n
\n {t('common.back')}
\n {t('activity.f2f.contact_selection.description')}
\n \n \n
\n - \n {contactsPaginator.items.map(contact => (\n
{t('activity.f2f.contact_selection.action_description')}
\n {t('activity.f2f.emailing.body_required')}
\n )}\n {!disabled && showBulkInterpolationWarning && (\n{t('activity.f2f.emailing.bulk_interpolations_caveat')}
\n )}\n\n {t('activity.f2f.emailing.bulk_emails_missing', {\n selected: contactList.length,\n valid: validContacts.length,\n })}\n
\n )}\n{t('activity.f2f.emailing.actions_description')}
\n {t('activity.f2f.emailing.email_missing')}
}\n{t('activity.f2f.emailing.actions_description')}
\n \n \n {t('activity.f2f.emailing.fill_reports')} \n \n
\n );\n }\n\n const Component = isBulk ? BulkSendingScreen : IndividualSendingScreen;\n return (\n <>\n {t('activity.f2f.emailing.way_to_go_text')}
\n\n
\n \n \n <>\n \n
\n \n \n
\n \n {`${contactIndex} ${t('activity.p2p.of')} ${\n contactList.length\n } ${t('activity.p2p.messages')}`} \n
\n \n
\n {contact && (\n \n \n \n {t('activity.p2p.send_to')} {capitalizedContactName(contact)}\n \n \n {loadingScripts ? (\n \n \n \n {showPersonalizedDisclaimer && (\n \n {t('activity.p2p.personalized_disclaimer')}\n \n )}\n \n {isConfirmContactState\n ? `${t('activity.p2p.confirm_send')} ${contact.first_name}`\n : t('common.send')}\n \n \n {!textingAllowed && (\n
\n )}\n\n {!contact && contactList.length > 0 && contactListExhausted && (\n \n \n {t('activity.p2p.nice_work')} \n {t('activity.p2p.responses_inbox')} \n \n \n \n {t('activity.p2p.keep_texting')}\n \n \n \n
\n )}\n\n {!contact && contactList.length === 0 && (\n \n \n {t('activity.p2p.no_contacts')} \n {t('activity.p2p.check_inbox_responses')} \n \n \n \n \n {t('activity.p2p.check_inbox')}\n \n \n \n \n
\n )}\n \n \n
\n \n {t('activity.p2p.texting_not_allowed')}{' '}\n {t('activity.p2p.try_later')}\n
\n )}\n \n\n \n {\n history.push({\n pathname: '/voters',\n state: {\n contact_id: contactId,\n firstName: vfirst,\n lastName: vsecond,\n },\n });\n }}\n onSaveMatchFinally={() => null}\n redirectIfNoVoterInfo\n />\n \n
\n );\n};\n\nVoterMatch.propTypes = {};\n\nexport default VoterMatch;\n","import PropTypes from 'prop-types';\nimport React from 'react';\nimport styled from 'styled-components';\n\nconst Wrapper = styled.div``;\n\nconst Term = styled.span`\n font-family: ${({ theme }) => theme.fonts.bold};\n`;\n\nconst Description = styled.span`\n ${({ vertical }) =>\n vertical\n ? `\n display: block;\n margin-top: 6px;\n `\n : `\n padding-left: 5px;\n\n @media screen and (max-width: 767px) {\n padding-left: 0;\n display: block;\n margin-top: 6px;\n }\n `}\n`;\n\nconst Help = styled.div`\n font-size: 0.75em;\n line-height: 1.4;\n margin-top: 0.5em;\n`;\n\nconst Definition = ({ term, description, help, vertical, ...rest }) => (\n \n
\n );\n }\n\n const shareNowVisible = !!navigator.share;\n const inviteSection = (\n \n {((contact.registration_status !== RegistrationStatusTypes.REGISTERED &&\n contact.registration_status !== RegistrationStatusTypes.UNCONFIRMED) ||\n !campaign.is_sending_registration_forms ||\n contact.requested_registration_form === 'no') && (\n
\n \n \n {\n updateContact({\n reg_state: 'not_sent',\n registration_status: RegistrationStatusTypes.UNCONFIRMED,\n reported_registered: true,\n });\n message.success(\n 'Amazing! The next step is to get your absentee ballot.',\n 3,\n );\n }}\n >\n {t('Yes')}\n \n {\n updateContact({\n reg_state: 'unable_to_register_online',\n registration_status: RegistrationStatusTypes.UNREGISTERED,\n reported_registered: false,\n });\n }}\n >\n {t('No')}\n \n {contact.registration_status ===\n RegistrationStatusTypes.DIFFERENT_ADDRESS && (\n {\n updateContact({\n registration_status: RegistrationStatusTypes.REGISTERED,\n });\n }}\n >\n {t('Addresses are fine.')}\n \n )}\n \n
\n )}\n {campaign.is_sending_registration_forms &&\n !contact.reported_registered &&\n contact.registration_status !== RegistrationStatusTypes.DIFFERENT_ADDRESS && (\n \n \n {\n updateContact({\n reported_registered: false,\n requested_registration_form: 'yes',\n });\n message.success(\n 'Success! You will receive a voter registration form in the mail in the next 5-7 days.',\n 3,\n );\n document\n .getElementById('team-section')\n .scrollIntoView({ behavior: 'smooth', block: 'center' });\n }}\n >\n {t('Yes')}\n \n {\n updateContact({\n requested_registration_form: 'no',\n });\n }}\n >\n {t('No')}\n \n \n
\n )}\n \n \n {t('Request your absentee ballot online')}\n \n
\n \n \n {t('voting_information.print_your_application')}\n \n
\n {campaign.is_sending_vbm_forms &&\n contact.state_abbrev &&\n !contact.state_abbrev.match(/KY|SC|MS/) &&\n !contact.automatic_vbm && (\n <>\n \n \n {t('voting_information.cannot_vbm_with_state', { state })}\n \n
\n \n \n {t('voting_information.cannot_early_voting_with_state', { state })}\n \n
\n \n \n {hasVoters ? (\n <>\n \n \n \n Select\n \n \n \n \n ) : (\n \n Add Contact Manually \n \n }\n >\n {t('idvoters.results.no_results_message')}\n \n )}\n \n
\n );\n },\n);\n\nVotersList.propTypes = {\n onSelectClick: PropTypes.func.isRequired,\n selectedVoterId: PropTypes.string,\n selectVoter: PropTypes.func.isRequired,\n showVoterModal: PropTypes.func.isRequired,\n voters: PropTypes.arrayOf(PropTypes.object),\n};\n\nexport default VotersList;\n","import PropTypes from 'prop-types';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport styled from 'styled-components';\n\nimport theme from '@web/styles/theme';\n\nimport FilterButton from '@web/components/common/FilterButton';\nimport imageElectionCheck from '@web/../../assets/images/web/election-check.png';\nimport imageElectionX from '@web/../../assets/images/web/election-x.png';\nimport ImpactiveModal from '../../common/ImpactiveModal';\nimport ImpactiveButton from '../../ImpactiveButton';\nimport {\n getVoterInfo,\n getParty,\n getVotingRecords,\n getFrequency,\n frequencyTagConverter,\n} from '@web/utils/getVoterInfo';\n\nconst ButtonWrapper = styled.div`\n width: 100%;\n display: flex;\n justify-content: flex-end;\n padding-top: 10px;\n > button {\n width: 15%;\n min-width: 170px;\n }\n`;\n\nconst ModalContent = styled.div`\n color: ${({ theme }) => theme.colors.black};\n padding-right: 20px;\n margin-right: -20px;\n`;\n\nconst Name = styled.div`\n font-family: ${({ theme }) => theme.fonts.semibold};\n font-size: 16px;\n`;\n\nconst RecentElections = styled.div`\n font-size: 16px;\n font-family: ${({ theme }) => theme.fonts.semibold};\n`;\n\nconst RecentElectionSection = styled.div`\n margin-bottom: 30px;\n`;\n\nconst ElectionRow = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 10px;\n`;\n\nconst ElectionName = styled.div`\n font-size: 14px;\n`;\n\nconst StyledElectionImage = styled.img`\n height: 16px;\n width: 16px;\n`;\n\n// Search the national voter file with the following parameters to find possible matches for either a contact or someone you've just met at an event\nconst VotersHistoryModal = ({ closeModal, voter, visible, onListItemClick }) => {\n const { t } = useTranslation();\n\n if (!visible) return null;\n\n const { fullName, address } = getVoterInfo(voter);\n const party = getParty(voter);\n const votingRecords = getVotingRecords(voter);\n const { frequency } = getFrequency(voter);\n const inDistrict = false;\n\n return (\n <>\n - \n {voters.map(item => (\n
{address}
\n\n {/* ***************************** /Voter Info **************************************** */}\n\n \n\n {/* ***************************** Voter Tags **************************************** */}\n
\n
\n\n {/* ***************************** /Voter Tags **************************************** */}\n\n \n {}}>\n {t('idvoters.voter.tags.in_district')}\n \n
\n\n {party.party && (\n \n null}>\n {party.party}\n \n
\n )}\n\n \n null}>\n {frequency}\n \n
\n \n\n {/* ***************************** Election Attendance ******************************** */}\n\n
\n {index !== 0 && \n \n {activeIndex <= index ? item.icon : '✔️'}\n \n {item.text} \n \n
\n );\n })}\n \n {t('check_registration.tellUs.title').toLowerCase()} ✍️ \n {t('auth.youll-be-added-as-the-first-administrator')} \n
\n \n {t('frontline.welcome')} 👋 \n {t('auth.tell-us-a-bit')} \n
\n Leaderboard:
\n {controls.activity?.title}
\n - \n {question.answers.map(answer => (\n \n ))}\n
Leaderboard:
\n {controls.activity?.title}
\n