\n {I18n.t(\n 'components.pricing.plans.subscription.downgrade.modal.title',\n )}\n
\n \n {I18n.t(name, {\n scope: 'components.plans',\n })}\n
\n\n {price && price === 'TBD' ? price : null}\n {price && price !== 'TBD' ? (\n
\n \n {isFreePlan &&\n I18n.t('components.pricing.plans.free_plan_card_help_text')}\n {!isFreePlan &&\n period === MONTH_INDICATOR_KEY &&\n I18n.t('components.pricing.plans.monthly_subscription_text')}\n {!isFreePlan &&\n period === YEAR_INDICATOR_KEY &&\n I18n.t('components.pricing.plans.yearly_subscription_text')}\n
\n \n - \n
- \n \n {I18n.t('components.pricing.plans.features.searches')}\n \n \n {searches\n ? I18n.t('components.billing.plan.status.unlimited')\n : '-'}\n \n \n
- \n \n {I18n.t('components.pricing.plans.features.bookings')}\n \n \n {bookings\n ? I18n.t('components.billing.plan.status.unlimited')\n : '-'}\n \n \n
- \n \n {I18n.t('components.pricing.plans.features.profiles')}\n \n \n {travelers\n ? I18n.t('components.billing.plan.status.unlimited')\n : '-'}\n \n \n
- \n \n {I18n.t('components.pricing.plans.features.workspaces')}\n \n \n
\n \n \n - \n \n {I18n.t('components.pricing.plans.features.tickets')}\n \n \n {supportTicket\n ? I18n.t('components.pricing.plans.features.available')\n : '-'}\n \n \n
- \n \n {I18n.t('components.pricing.plans.features.phone')}\n \n \n {phone > 0\n ? I18n.t('components.billing.plan.phone_unlimited', {\n plan_phone: phone,\n })\n : '-'}\n \n \n
- \n \n {I18n.t('components.pricing.plans.features.channels')}\n \n \n {channels !== null\n ? I18n.t(channels, {\n scope: 'components.billing.plan.status',\n })\n : I18n.t('components.billing.plan.status.unlimited')}\n \n \n
- \n \n {I18n.t('components.pricing.plans.features.domain')}\n \n \n {domain\n ? I18n.t('components.pricing.plans.features.available')\n : '-'}\n \n \n
\n \n \n setModalOpen(false)}\n onKeyDown={() => setModalOpen(false)}\n role=\"presentation\"\n >\n
\n \n \n
\n \n
\n \n \n
\n {recaptchaKey && (\n \n \n \n
\n \n \n \n );\n};\n\nContactPage.defaultProps = {\n buttonClassName: null,\n};\n\nContactPage.propTypes = {\n signInUrl: PropTypes.string.isRequired,\n linkText: PropTypes.string.isRequired,\n recaptchaKey: PropTypes.string.isRequired,\n recaptchaWidgetSrc: PropTypes.string.isRequired,\n buttonClassName: PropTypes.string,\n};\n\nexport default ContactPage;\n","/* eslint-disable react/no-array-index-key */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { Alert as RclAlert } from '@wtag/react-comp-lib';\n\nconst Alert = props => {\n const { status } = props;\n\n const alertStatuses = {\n failure: 'urgent',\n success: 'success',\n notice: 'highlight',\n };\n\n return \n
\n \n \n \n \n
\n );\n};\n\nRegistration.propTypes = {\n routes: PropTypes.shape({\n signInUrl: PropTypes.string,\n signUpUrl: PropTypes.string,\n }).isRequired,\n};\n\nexport default Registration;\n","export const APPCUES_SOURCE = '//fast.appcues.com/204956.js';\nexport const APPCUES_KEYS = [\n 'Appcues',\n 'AppcuesSettings',\n 'AppcuesBundleSettings',\n];\n// PATH_TO_REMOVE_APPCUES_REGEX removes Appcues if the url\n// ends with either one of [ billing.html , billing.html/ , billing , billing/ ]\n// has either one of [billing? , billing/? , billing.html? , billing.html/? ] in it\nexport const PATH_TO_REMOVE_APPCUES_REGEX =\n /(billing\\.html\\/?$)|(billing\\/?$)|(billing\\??\\/?$)|(billing\\.html\\??\\/?$)/;\n","import { useEffect } from 'react';\nimport {\n APPCUES_KEYS,\n APPCUES_SOURCE,\n PATH_TO_REMOVE_APPCUES_REGEX,\n} from '../constants/appcues';\n\nconst useAppcues = user => {\n const { id, first_name: firstName, last_name: lastName, email } = user || {};\n\n if (!id) {\n return;\n }\n\n const handleScriptLoad = () => {\n window.Appcues.identify(id, {\n name: firstName + lastName,\n email,\n });\n };\n\n useEffect(() => {\n const { pathname: currentPathName } = window.location;\n let script = null;\n\n if (PATH_TO_REMOVE_APPCUES_REGEX.test(currentPathName)) {\n APPCUES_KEYS.forEach(key => {\n delete window[key];\n });\n } else {\n window.AppcuesSettings = { enableURLDetection: true };\n\n script = document.createElement('script');\n script.src = APPCUES_SOURCE;\n script.async = true;\n\n script.addEventListener('load', handleScriptLoad);\n document.body.appendChild(script);\n }\n\n return () => {\n if (script) {\n script.removeEventListener('load', handleScriptLoad);\n document.body.removeChild(script);\n }\n };\n }, [id, window.location.pathname]);\n};\n\nexport default useAppcues;\n","import React from 'react';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport settings from '../../../../assets/images/settings.svg';\n\nexport const settingsLinks = [\n {\n icon: settings,\n name: \n {signedIn && (\n \n {menuItem}\n \n ))}\n {sideNavSettings.map(({ name }) => (\n \n {name}\n \n ))}\n \n )}\n\n
\n {!signedIn && (\n - \n {sideBarItems.map(({ label, link, subMenu }, index) =>\n !subMenu.length ? (\n
- \n {label}\n \n ) : (\n
- \n {label}\n \n ))}\n
- \n {navItems.map(({ label, link, subMenu }, index) => (\n
- \n {label}\n \n ))}\n
\n
\n )}\n \n );\n};\n\nexport default SideDrawer;\n\nSideDrawer.defaultProps = {\n signedInAsAdmin: null,\n};\n\nSideDrawer.propTypes = {\n open: PropTypes.bool.isRequired,\n navItems: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.shape().isRequired,\n link: PropTypes.string.isRequired,\n subMenu: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.shape().isRequired,\n link: PropTypes.string.isRequired,\n }),\n ).isRequired,\n }),\n ).isRequired,\n sideBarItems: PropTypes.arrayOf(\n PropTypes.shape({\n icon: PropTypes.string.isRequired,\n menuItem: PropTypes.shape().isRequired,\n url: PropTypes.string.isRequired,\n }),\n ).isRequired,\n adminLinks: PropTypes.arrayOf(\n PropTypes.shape({\n icon: PropTypes.string.isRequired,\n menuItem: PropTypes.shape().isRequired,\n url: PropTypes.string.isRequired,\n }),\n ).isRequired,\n signedIn: PropTypes.bool.isRequired,\n signedInAsAdmin: PropTypes.bool,\n routes: PropTypes.shape().isRequired,\n settingsRoute: PropTypes.string.isRequired,\n};\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport SpinnerIcon from 'affiliateIcons/spinner.svg';\nimport routes from '../../routes';\nimport httpClient from '../../libraries/httpClient';\nimport WorkspaceTag from '../../../private/components/Workspace/WorkspaceTag';\n\nconst WorkspaceSettings = props => {\n const [workspaces, setWorkspaces] = useState([]);\n const [superAdmin, setSuperAdmin] = useState(false);\n const [isLoading, setIsLoading] = useState(true);\n const ACTIVE_STATE = 'active';\n\n const fetchWorkspaces = async () => {\n setIsLoading(true);\n const { data } = await httpClient.get(\n routes.workspace.fetch({ affiliate_id: props.affiliateId, state: ACTIVE_STATE }),\n );\n setIsLoading(false);\n setWorkspaces(data.workspaces);\n setSuperAdmin(data.superAdmin);\n };\n\n useEffect(() => {\n fetchWorkspaces();\n }, []);\n\n return (\n \n {isLoading && (\n
\n );\n};\n\nWorkspaceSettings.propTypes = {\n affiliateId: PropTypes.number.isRequired,\n};\n\nexport default WorkspaceSettings;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport IconButton from '@wtag/rcl-icon-button';\nimport { Avatar, I18nText } from '@wtag/react-comp-lib';\n\nconst ProfileMenu = ({ links, currentUser, currentUsersAvatar }) => {\n const { signOutUrl, privacyUrl, settingsUrl, termsUrl } = links;\n const { first_name: firstName, last_name: lastName, email } = currentUser;\n const iconLabelText = (\n \n 
\n
\n )}\n {workspaces && (\n - \n {workspaces.map(({ acronym, name, agentUrl, identifier }, index) => (\n
\n
\n );\n\n return (\n \n \n
\n );\n};\n\nProfileMenu.defaultProps = {\n currentUsersAvatar: null,\n};\n\nProfileMenu.propTypes = {\n links: PropTypes.shape({\n signOutUrl: PropTypes.string.isRequired,\n privacyUrl: PropTypes.string.isRequired,\n settingsUrl: PropTypes.string.isRequired,\n termsUrl: PropTypes.string.isRequired,\n }).isRequired,\n currentUser: PropTypes.shape({\n first_name: PropTypes.string.isRequired,\n last_name: PropTypes.string.isRequired,\n email: PropTypes.string.isRequired,\n }).isRequired,\n currentUsersAvatar: PropTypes.string,\n};\n\nexport default ProfileMenu;\n","/* eslint-disable react/no-array-index-key */\n/* eslint-disable no-shadow */\nimport React, { useState, useEffect } from 'react';\nimport { Avatar, EmphasisTag, Link, I18nText } from '@wtag/react-comp-lib';\nimport { MenuItem } from '@wtag/rcl-menu';\nimport Popover from '@wtag/rcl-popover';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Button from '@wtag/rcl-button';\nimport logo from '../../../../assets/images/logo.svg';\nimport downArrow from '../../../../assets/images/arrow_down-24px.svg';\nimport menuIcon from '../../../../assets/images/menu.svg';\nimport menuOpenIcon from '../../../../assets/images/menu_open.svg';\nimport languageIcon from '../../../../assets/images/language.svg';\nimport affiliatesThreeSixty from '../../../../assets/images/af-360.svg';\nimport dashboard from '../../../../assets/images/dashboard.svg';\nimport headsetMic from '../../../../assets/images/headset_mic.svg';\nimport person from '../../../../assets/images/person.svg';\nimport pieChart from '../../../../assets/images/pie_chart.svg';\nimport widgets from '../../../../assets/images/widgets.svg';\nimport Registration from '../Registration/Registration';\nimport useAppcues from '../../hooks/useAppcues';\nimport SideDrawer from './SideDrawer';\nimport WorkspaceSettings from './WorkspaceSettings';\nimport ProfileMenu from '../ProfileMenu';\n\nconst Navbar = props => {\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n const [isWorkspaceVisible, setIsWorkspaceVisible] = useState(false);\n const [isLanguageVisible, setIsLanguageVisible] = useState(false);\n const [isProfileMenuVisible, setIsProfileMenuVisible] = useState(false);\n const { signedIn, signedInAsAdmin } = props.signedInProps;\n const { currentUser } = props;\n const { renderLogo } = props;\n\n const [isScrolling, setIsScrolling] = useState(false);\n\n useAppcues(currentUser);\n\n useEffect(() => {\n window.addEventListener('scroll', () => {\n setIsScrolling(window.scrollY > 150);\n });\n }, []);\n\n const toggleMenu = () => {\n setIsMenuOpen(!isMenuOpen);\n };\n\n const navItems = [\n {\n label: \n
\n \n {firstName} {lastName}\n
\n {email}
\n \n \n
\n \n \n
\n ),\n },\n ],\n },\n {\n icon: pieChart,\n label: - \n {navItems.map(({ label, link, subMenu }, index) => (\n
- \n
- \n
\n ))}\n - \n
- \n
- \n
\n \n \n )}\n - \n
}\n type=\"primary\"\n size=\"small\"\n />\n \n \n ) : (\n - \n
\n
- \n
- \n
\n \n )}\n\n {signedIn && (\n \n
\n {signedIn && (\n
\n \n {signedIn ? (\n
\n \n \n )}\n\n {!signedIn && (\n \n \n {signedIn ? (\n
\n \n \n ) : (\n \n \n \n {items.map(item => (\n \n \n \n \n
\n )\n );\n};\n\nSideNav.propTypes = {\n supportNotificationCount: PropTypes.number.isRequired,\n sidebarRoutes: PropTypes.shape({\n affiliatesThreeSixty: PropTypes.string,\n billingIndex: PropTypes.string,\n dashboard: PropTypes.string,\n settings: PropTypes.string,\n supportTickets: PropTypes.string,\n users: PropTypes.string,\n workspaces: PropTypes.string,\n }).isRequired,\n signedInProps: PropTypes.shape({\n signedIn: PropTypes.bool,\n signedInAsAdmin: PropTypes.bool,\n }).isRequired,\n};\n\nexport default SideNav;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Input from '@wtag/rcl-input';\nimport Button from '@wtag/rcl-button';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport SignUpFormHeader from '../SignUpFormHeader';\n\nconst WorkspaceConfiguratorForm = ({ signUp, updateSignUp, errors }) => {\n const [legalAddress, setLegalAddress] = useState(signUp.legal_address);\n const [tenantName, setTenantName] = useState(signUp.tenant_name);\n const [tenantIdentifier, setTenantIdentifier] = useState(\n signUp.tenant_identifier,\n );\n\n const onClick = () => {\n const params = {\n locale: I18n.locale,\n sign_up: {\n tenant_name: tenantName,\n tenant_identifier: tenantIdentifier,\n legal_address: legalAddress,\n },\n };\n updateSignUp(params);\n };\n\n return (\n \n
\n );\n};\n\nWorkspaceConfiguratorForm.defaultProps = {\n errors: {},\n};\n\nWorkspaceConfiguratorForm.propTypes = {\n signUp: PropTypes.shape({\n tenant_name: PropTypes.string.isRequired,\n tenant_identifier: PropTypes.string.isRequired,\n legal_address: PropTypes.string.isRequired,\n }).isRequired,\n updateSignUp: PropTypes.func.isRequired,\n errors: PropTypes.objectOf(PropTypes.string),\n};\n\nexport default WorkspaceConfiguratorForm;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { I18nText, Link } from '@wtag/react-comp-lib';\nimport tenantIcon from 'affiliateImages/sign-up/tenant.svg';\nimport userIcon from 'affiliateImages/sign-up/user.svg';\nimport SignUpIconHeader from '../SignUpIconHeader';\nimport WorkspaceConfiguratorForm from './WorkspaceConfiguratorForm';\nimport SignUpFormHeader from '../SignUpFormHeader';\nimport routes from '../../../routes';\nimport httpClient from '../../../libraries/httpClient';\n\nconst SignUpConfigurator = props => {\n const [currentState, setCurrentState] = useState(props.currentState);\n const [isPollingInitiated, setIsPollingInitiated] = useState(false);\n const [errors, setErrors] = useState({});\n\n const CONFIRMED_STATE = 'confirmed';\n const PREPARING_APPLICATIONS_STATE = 'preparing_applications';\n const APPLICATION_PREPARED_STATE = 'applications_prepared';\n const SIGNED_UP_WITH_EXISTING_ACCOUNT = 'account_exists';\n\n const updateSignUp = params => {\n httpClient\n .put(routes.signUp.update({ id: props.signUp.id }), params)\n .then(({ data }) => {\n if (data.redirectUrl) {\n window.location.replace(data.redirectUrl);\n }\n setCurrentState(data.currentState);\n })\n .catch(({ response }) => {\n if (response.status === 422) {\n setCurrentState(response.data.currentState);\n setErrors(response.data.errors);\n }\n });\n };\n\n const executeFetchCall = async () => {\n const data = await httpClient.get(\n routes.signUp.fetch({ id: props.signUp.id }),\n );\n\n return data;\n };\n\n const fetchSignUpStatus = async () => {\n const { data } = await executeFetchCall();\n if (currentState !== data.currentState) {\n setCurrentState(data.currentState);\n }\n if (data.applicationPrepared) {\n window.location.replace(data.redirectUrl);\n } else {\n setTimeout(fetchSignUpStatus, 3000);\n }\n };\n\n useEffect(() => {\n if (currentState === PREPARING_APPLICATIONS_STATE && !isPollingInitiated) {\n fetchSignUpStatus();\n setIsPollingInitiated(true);\n }\n }, [currentState]);\n\n const content = {};\n switch (currentState) {\n case CONFIRMED_STATE:\n content.iconHeader = (\n \n
\n \n setTenantName(value)}\n value={tenantName}\n label={\n
\n \n
\n }\n error={errors.tenantName}\n touched={true}\n />\n \n setLegalAddress(value)}\n value={legalAddress}\n label={\n
\n \n
\n }\n error={errors.legalAddress}\n touched={!!errors.legalAddress}\n />\n \n
\n \n
\n \n setTenantIdentifier(value)}\n value={tenantIdentifier}\n label={\n
\n \n
\n }\n error={errors.tenantIdentifier}\n touched={true}\n />\n \n
\n \n
\n );\n break;\n case SIGNED_UP_WITH_EXISTING_ACCOUNT:\n content.iconHeader = (\n \n
\n \n
\n \n \n
\n );\n break;\n default:\n }\n\n return (\n \n
\n \n
\n {props.userEmail &&\n I18n.t('components.sign_up.user_configuration.hint', {\n email: props.userEmail,\n })}\n
\n {props.redirectUrl && (\n \n
\n \n {props.userEmail &&\n I18n.t('components.sign_up.user_configuration.hint', {\n email: props.userEmail,\n })}\n
\n
\n );\n};\n\nSignUpConfigurator.defaultProps = {\n userEmail: null,\n redirectUrl: null,\n signUp: {},\n};\n\nSignUpConfigurator.propTypes = {\n signUp: PropTypes.shape({\n id: PropTypes.number.isRequired,\n user_first_name: PropTypes.string.isRequired,\n user_last_name: PropTypes.string.isRequired,\n user_email: PropTypes.string.isRequired,\n password: PropTypes.string.isRequired,\n }),\n currentState: PropTypes.string.isRequired,\n userEmail: PropTypes.string,\n redirectUrl: PropTypes.string,\n};\n\nexport default SignUpConfigurator;\n","import React, { useState, useRef, useCallback, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport Button from '@wtag/rcl-button';\nimport Input from '@wtag/rcl-input';\nimport moment from 'moment';\n\nimport organizationIcon from 'affiliateImages/sign-up/organization.svg';\nimport SignUpIconHeader from '../SignUpIconHeader';\nimport SignUpFormHeader from '../SignUpFormHeader';\nimport httpClient from '../../../libraries/httpClient';\nimport routes from '../../../routes';\nimport PhoneNumberInput from '../../PhoneNumberInput';\n\nconst INITIAL_STEP = 'initial';\nconst CONFIRM_CODE = 'confirmCode';\nconst CHANGE_NUMBER = 'changeNumber';\n\n// https://stackoverflow.com/questions/68397821/react-js-countdown-timer-using-moment-js\nconst calculateDuration = (eventTime) =>\n moment.duration(\n Math.max(eventTime - Math.floor(Date.now() / 1000), 0),\n 'seconds',\n );\n\nfunction CountDown({ eventTime, interval, onZero }) {\n if (!eventTime) {\n return null;\n }\n const [duration, setDuration] = useState(calculateDuration(eventTime));\n const timerRef = useRef(0);\n const timerCallback = useCallback(() => {\n setDuration(calculateDuration(eventTime));\n }, [eventTime]);\n\n useEffect(() => {\n timerRef.current = setInterval(timerCallback, interval);\n\n return () => {\n clearInterval(timerRef.current);\n };\n }, [eventTime]);\n\n useEffect(() => {\n if (duration.asSeconds() === 0) {\n onZero();\n }\n }, [duration.toISOString()]);\n\n return (\n \n {duration.minutes()}:{duration.seconds().toString().padStart(2, '0')}\n \n );\n}\n\nCountDown.propTypes = {\n eventTime: PropTypes.number.isRequired,\n interval: PropTypes.number.isRequired,\n onZero: PropTypes.func.isRequired,\n};\n\nconst SignUpConfirmation = ({\n signUpId,\n urls,\n initialPhoneNumber,\n initialSmsVerificationAvailableAt,\n}) => {\n let initialStateForStep = INITIAL_STEP;\n if (initialSmsVerificationAvailableAt) {\n initialStateForStep = CONFIRM_CODE;\n }\n const [step, setStep] = useState(initialStateForStep);\n const [smsVerificationAvailableAt, setSmsVerificationAvailableAt] = useState(\n initialSmsVerificationAvailableAt\n ? moment(initialSmsVerificationAvailableAt)\n : null,\n );\n const [verificationCode, setVerificationCode] = useState('');\n const [resendAvailable, setResendAvailable] = useState(\n smsVerificationAvailableAt\n ? smsVerificationAvailableAt.isBefore(moment())\n : true,\n );\n const [userMobileNumber, setUserMobileNumber] = useState(initialPhoneNumber);\n const [errors, setErrors] = useState({});\n const [inputEnabled, setInputEnabled] = useState(false);\n\n const sendCode = () => {\n return httpClient\n .put(routes.signUp.requestPhoneValidation(signUpId))\n .then((response) => {\n setStep(CONFIRM_CODE);\n setSmsVerificationAvailableAt(\n moment(response.data.sendingAvailableAgainAt),\n );\n setResendAvailable(false);\n setInputEnabled(true);\n })\n .catch(({ response }) => {\n setInputEnabled(false);\n setStep(CONFIRM_CODE);\n if (response.status === 429 || response.status === 400) {\n if (response.data.sendingAvailableAgainAt) {\n setSmsVerificationAvailableAt(\n moment(response.data.sendingAvailableAgainAt),\n );\n setResendAvailable(false);\n }\n setErrors({\n base: I18n.t(response.data.error, {\n scope: 'components.sign_up.confirmation.errors',\n }),\n });\n }\n });\n };\n\n const validateCode = () => {\n const params = { code: verificationCode };\n return httpClient\n .put(routes.signUp.validatePhoneNumber(signUpId), params)\n .then(response => {\n window.location.replace(response.data.nextStepUrl);\n })\n .catch(({ response }) => {\n if (response.status === 400) {\n setErrors({\n base: I18n.t('components.sign_up.confirmation.validation_failed'),\n });\n }\n });\n };\n\n const updatePhoneNumber = () => {\n const params = {\n locale: I18n.locale,\n user_mobile_number: userMobileNumber,\n };\n return httpClient\n .put(routes.signUp.updatePhoneNumber(signUpId), params)\n .then(response => {\n setUserMobileNumber(response.data.phoneNumber);\n setStep(CONFIRM_CODE);\n setErrors({});\n if (resendAvailable) {\n sendCode();\n }\n })\n .catch(({ response }) => {\n if (response.status === 422) {\n setErrors(response.data.errors);\n }\n });\n };\n\n const setMobileVerificationCode = code => {\n const digitsAsCode = code.replace(/\\D+/g, '');\n setVerificationCode(digitsAsCode);\n };\n\n let content;\n switch (step) {\n case INITIAL_STEP:\n content = (\n \n
\n {content.iconHeader}
\n \n {content.form}\n
\n \n
\n );\n break;\n\n case CONFIRM_CODE:\n content = (\n \n
\n \n
{userMobileNumber}
\n\n
\n
\n \n
\n \n
\n {errors.base && (\n \n \n
\n }\n value={verificationCode}\n error={errors.verificationCode}\n type=\"number\"\n disabled={!inputEnabled}\n />\n {errors.base}
\n )}\n \n
\n \n \n setResendAvailable(true)}\n />\n \n )}\n
\n \n
\n \n );\n break;\n\n case CHANGE_NUMBER:\n content = (\n \n
\n \n
\n \n \n
\n }\n onChange={setUserMobileNumber}\n error={errors.userMobileNumber}\n isInputTouched={userMobileNumber !== null}\n />\n \n
\n \n );\n break;\n\n default:\n break;\n }\n\n return (\n \n
\n );\n};\n\nSignUpConfirmation.defaultProps = {\n initialSmsVerificationAvailableAt: null,\n};\n\nSignUpConfirmation.propTypes = {\n signUpId: PropTypes.string.isRequired,\n urls: PropTypes.shape({\n signInUrl: PropTypes.string.isRequired,\n }).isRequired,\n initialPhoneNumber: PropTypes.string.isRequired,\n initialSmsVerificationAvailableAt: PropTypes.string,\n};\n\nexport default SignUpConfirmation;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst SignUpFormHeader = ({ text, step }) => {\n return (\n \n
\n \n
\n \n
\n\n \n \n
\n \n
\n \n
\n {content}
\n \n
\n );\n};\n\nSignUpFormHeader.defaultProps = {\n step: null,\n};\n\nSignUpFormHeader.propTypes = {\n text: PropTypes.node.isRequired,\n step: PropTypes.number,\n};\n\nexport default SignUpFormHeader;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst SignUpIconHeader = ({ text, icon }) => {\n return (\n {text}
\n {step && (\n \n {I18n.t('components.sign_up.step', { step_number: step })}\n
\n )}\n \n
\n );\n};\n\nSignUpIconHeader.defaultProps = {\n icon: null,\n};\n\nSignUpIconHeader.propTypes = {\n text: PropTypes.node.isRequired,\n icon: PropTypes.node,\n};\n\nexport default SignUpIconHeader;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Input from '@wtag/rcl-input';\nimport Button from '@wtag/rcl-button';\nimport SelectBox from '@wtag/rcl-select-box';\nimport { I18nText, CheckBox } from '@wtag/react-comp-lib';\nimport Alert from '@wtag/rcl-alert';\nimport routes from '../../../routes';\nimport httpClient from '../../../libraries/httpClient';\nimport selectBoxObjectMapper from '../../../helper/selectBoxObjectMapper';\nimport SignUpFormHeader from '../SignUpFormHeader';\nimport PhoneNumberInput from '../../PhoneNumberInput';\n\nconst OrganizationForm = ({ currencyOptions, planId, legalPaperRoutes }) => {\n const [acceptLegalPapers, setAcceptLegalPapers] = useState(false);\n const [showAlert, setShowAlert] = useState(false);\n const [proceedNext, setProceedNext] = useState(false);\n const [tenantName, setTenantName] = useState('');\n const [userEmail, setUserEmail] = useState('');\n const [userMobileNumber, setUserMobileNumber] = useState('');\n const [currency, setCurrency] = useState(null);\n const [errors, setErrors] = useState({});\n\n const createSignUp = () => {\n const params = {\n locale: I18n.locale,\n sign_up: {\n tenant_name: tenantName,\n user_email: userEmail,\n user_mobile_number: userMobileNumber,\n plan_id: planId,\n currency,\n },\n };\n httpClient\n .post(routes.signUp.create(), params)\n .then(() => setProceedNext(true))\n .catch(({ response }) => {\n if (response.status === 422) {\n setErrors(response.data.errors);\n }\n setProceedNext(false);\n });\n };\n\n const onNextClick = () => {\n setShowAlert(!acceptLegalPapers);\n\n if (acceptLegalPapers) {\n createSignUp();\n }\n };\n\n const onClickAcceptLegalPapers = (value) => {\n setAcceptLegalPapers(value);\n if (showAlert && value) {\n setShowAlert(false);\n }\n };\n\n const onInputChangeHandler = (inputValue, setState, errorKeyName) => {\n setState(inputValue);\n\n if (inputValue) {\n setErrors({ ...errors, [errorKeyName]: null });\n }\n };\n\n const handleCurrency = (option) => {\n const data = option ? option.value : null;\n\n onInputChangeHandler(data, setCurrency, 'currency');\n };\n\n const renderContent = () => {\n let content = (\n {text}
\n {icon && (\n \n 
\n
\n )}\n \n
\n \n \n onInputChangeHandler(value, setTenantName, 'tenantName')\n }\n error={errors.tenantName}\n touched={true}\n label={\n
\n \n
\n }\n value={tenantName}\n />\n \n
\n \n
\n \n \n onInputChangeHandler(value, setUserEmail, 'userEmail')\n }\n error={errors.userEmail}\n touched={true}\n label={\n
\n \n
\n }\n value={userEmail}\n />\n \n
\n \n
\n \n \n
\n }\n onChange={(value) =>\n onInputChangeHandler(\n value,\n setUserMobileNumber,\n 'userMobileNumber',\n )\n }\n error={errors.userMobileNumber}\n isInputTouched={errors.userMobileNumber !== null}\n />\n \n
\n \n
\n \n handleCurrency(option)}\n label={\n
\n \n
\n }\n value={selectBoxObjectMapper(currencyOptions, currency)}\n />\n \n \n
\n \n \n \n \n {I18n.t(\n 'components.sign_up.organization.form.legal_papers',\n )}\n \n \n \n {I18n.t(\n 'components.sign_up.organization.form.legal_papers_term',\n )}\n \n \n \n {I18n.t(\n 'components.sign_up.organization.form.legal_papers_join',\n )}\n \n \n \n {I18n.t(\n 'components.sign_up.organization.form.legal_papers_privacy',\n )}\n \n \n
\n }\n size=\"small\"\n onChange={(event) =>\n onClickAcceptLegalPapers(event.target.checked)\n }\n />\n \n
\n \n );\n if (proceedNext) {\n content = (\n \n
\n );\n }\n return content;\n };\n\n return (\n \n
\n \n
\n );\n};\n\nOrganizationForm.propTypes = {\n currencyOptions: PropTypes.arrayOf(\n PropTypes.shape({\n value: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n }),\n ).isRequired,\n planId: PropTypes.number.isRequired,\n legalPaperRoutes: PropTypes.shape({\n policies: PropTypes.shape({\n term: PropTypes.string.isRequired,\n privacy: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n};\n\nexport default OrganizationForm;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport organizationIcon from 'affiliateImages/sign-up/organization.svg';\nimport SignUpIconHeader from '../SignUpIconHeader';\nimport OrganizationForm from './OrganizationForm';\n\nconst SignUpOrganization = ({ currencyOptions, planId, routes }) => {\n return (\n \n
\n );\n};\n\nSignUpOrganization.propTypes = {\n currencyOptions: PropTypes.arrayOf(\n PropTypes.shape({\n value: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n }),\n ).isRequired,\n planId: PropTypes.number.isRequired,\n routes: PropTypes.shape({\n signInUrl: PropTypes.string.isRequired,\n }).isRequired,\n};\n\nexport default SignUpOrganization;\n","import React from 'react';\nimport { createBrowserHistory } from 'history';\nimport { QueryParamProvider } from 'use-query-params';\n\nconst history = createBrowserHistory();\n\nconst withQueryParamsProvider = WrappedComponent => props => {\n const [, forceUpdate] = React.useReducer(x => x + 1, 0);\n React.useEffect(() => {\n // listen for changes to the URL (e.g. through an input field) and force the app to re-render\n history.listen(() => {\n forceUpdate();\n });\n }, []);\n\n return (\n \n
\n \n
\n \n
\n\n \n \n
\n \n
\n \n
\n