\n
\n {/* ICONS */}\n {(showComments || showDelete) && (\n \n )}\n \n );\n }\n}\n\nconst containerColor = ({ colorIndex, theme, useTheme }) => {\n if (useTheme) return theme.primaryColor;\n return colorIndex !== undefined ? theme.getToolColor(colorIndex) : '#D9D9D9';\n};\n\nconst ToolOutputSelect = styled(ToolOutputSelectComponent)`\n &&& {\n padding: 6px;\n padding-left: 10px;\n background-color: ${({ colorIndex, theme }) =>\n colorIndex ? `${theme.getToolColor(colorIndex)}1A` : 'white'};\n .center-column {\n ${({ onSelectClick }) => onSelectClick && 'cursor: pointer'};\n flex: 1;\n }\n\n .select-input {\n margin-right: 10px;\n > * {\n color: ${containerColor};\n cursor: pointer;\n font-size: 25px;\n vertical-align: bottom;\n }\n }\n\n .center-children {\n ${props => props.selected && props.selectedBackground && `color: ${containerColor(props)};`}\n font-size: 15px;\n line-height: 26px;\n }\n\n .icon-row {\n align-items: center;\n display: flex;\n line-height: 1;\n margin-right: 10px;\n max-height: 33px;\n & > * {\n color: ${({ theme }) => theme.greyColor};\n font-size: 18px;\n margin: 0 3px;\n transition: all 0.3s ease;\n vertical-align: middle;\n &.active,\n &:hover {\n color: ${({ theme }) => theme.secondaryColor};\n }\n &:first-child {\n margin-left: 6px;\n }\n &:last-child {\n margin-right: 0;\n }\n }\n }\n\n ${({ disableSelectIcon }) =>\n disableSelectIcon &&\n css`\n .select-input {\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n }\n `}\n }\n`;\n\nexport default ToolOutputSelect;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Select as DefaultSelect } from 'components/elements';\nimport styled, { css } from 'styled-components';\nimport { ToolInputContainer } from 'components/Tools/';\nimport InputStyle from '../ToolInput/common';\n\nconst containerColor = ({ colorIndex, theme, useTheme }) => {\n if (useTheme) return theme.primaryColor;\n return colorIndex !== undefined ? theme.getToolColor(colorIndex) : '#B3B3B3';\n};\n\nconst RawSelect = props => {\n const { showComments, ...rest } = props;\n return showComments ? (\n \n {children}\n
\n \n
\n \n {t(\n \"Don't forget to fill this step for each one of your products/services for it to be marked as complete.\"\n )}\n
\n\n 
\n
\n );\n};\n\nRawParrobotTip.propTypes = {\n children: PropTypes.node.isRequired,\n rounded: PropTypes.bool,\n secondary: PropTypes.bool,\n size: PropTypes.string,\n type: PropTypes.string,\n};\n\nRawParrobotTip.defaultProps = {\n rounded: false,\n secondary: false,\n size: 'default',\n type: null,\n};\n\nconst paddingSizes = {\n small: 10,\n default: 30,\n};\n\nconst imgMaxWidthSizes = {\n small: 25,\n large: 240,\n xlarge: 320,\n default: 56,\n};\n\nconst imgMinWidthSizes = {\n small: 25,\n large: 100,\n default: 40,\n};\n\nconst imgMarginSizes = {\n small: 10,\n default: 14,\n};\n\nconst containerMarginSizes = {\n small: 20,\n default: 30,\n};\n\nconst imgLeftMargin = {\n large: -30,\n default: null,\n};\n\nconst txtLeftMargin = Object.entries(imgMaxWidthSizes).reduce((acc, [key, value]) => {\n acc[key] = value + 15;\n return acc;\n}, {});\n\n// TODO: refactor ParrobotTip component to include the negative margin DEFAULT_PADDING and \n// the parrobot theme as default props\nconst ParrobotTip = styled(RawParrobotTip)`\n background-color: ${({ secondary, theme }) =>\n secondary ? theme.itemActiveBg : theme.primaryColorBgFade};\n border-radius: ${({ rounded }) => (rounded ? 4 : 0)}px;\n margin-bottom: ${props => getValueForSize(props, containerMarginSizes)}px;\n margin-top: ${props => getValueForSize(props, containerMarginSizes)}px;\n padding: ${props => getValueForSize(props, paddingSizes)}px;\n position: relative;\n\n p {\n color: black;\n }\n a {\n color: ${({ theme }) => theme.primaryColor};\n &:hover {\n color: ${({ theme }) => theme.primaryColorHover};\n }\n }\n img {\n bottom: ${({ type }) => (type === 'rocket' ? 0 : 'initial')};\n display: inline-block;\n margin-left: ${props => getValueForSize(props, imgLeftMargin)}px;\n margin-right: ${props => getValueForSize(props, imgMarginSizes)}px;\n max-width: ${props => getValueForSize(props, imgMaxWidthSizes)}px;\n min-width: ${props => getValueForSize(props, imgMinWidthSizes)}px;\n position: absolute;\n vertical-align: text-top;\n }\n .text-container {\n display: inline-block;\n vertical-align: text-top;\n margin-left: ${props => getValueForSize(props, txtLeftMargin)}px;\n }\n @media (max-width: ${({ theme: { screenMdMin } }) => screenMdMin}) {\n img {\n display: none;\n }\n .text-container {\n margin-left: 12px;\n margin-right: 12px;\n }\n }\n`;\n\nexport default ParrobotTip;\n","import PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport bfbTheme from 'styles/b4b-theme';\n\nimport { InfoBubble } from 'components/elements';\nimport { DownOutlined } from '@ant-design/icons';\nimport { Col, Divider } from 'antd';\nimport { Row } from 'components/layout';\n\nfunction TableModules(props) {\n const { data, title, color, fontStyle, infoText, type, currency, separator } = props;\n\n return (\n <>\n {children}
\n {item}
\n \n \n \n {show &&
\n );\n};\n\nRawToolCollapse.propTypes = {\n bottomChildren: PropTypes.node,\n children: PropTypes.node,\n className: PropTypes.string.isRequired,\n colorIndex: PropTypes.number.isRequired,\n content: PropTypes.node,\n header: PropTypes.node.isRequired,\n highlightComments: PropTypes.bool,\n initialShow: PropTypes.bool,\n onCommentsClick: PropTypes.func,\n onToggle: PropTypes.func,\n showComments: PropTypes.bool,\n};\n\nRawToolCollapse.defaultProps = {\n bottomChildren: null,\n children: null,\n content: null,\n highlightComments: false,\n initialShow: false,\n onCommentsClick: null,\n onToggle: null,\n showComments: false,\n};\n\nconst ToolCollapse = styled(RawToolCollapse)`\n &&& {\n padding: 0;\n margin-bottom: 10px;\n .tool-collapse-container {\n padding: 10px 20px;\n justify-content: center;\n .default {\n width: 100%;\n }\n .tool-collapse-children {\n color: white;\n }\n .tool-collapse-button {\n color: white !important;\n background-color: transparent !important;\n padding: 0 !important;\n margin-left: 0 !important;\n }\n }\n ${({ type }) =>\n type === 'row' &&\n css`\n .default {\n display: flex;\n }\n .tool-collapse-header {\n width: 100%;\n flex: 1;\n }\n `}\n }\n`;\n\nexport default ToolCollapse;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Input as DefaultInput } from 'components/elements';\nimport styled from 'styled-components';\nimport InputStyle from './common';\n\nconst Input = props => {\n const { $semibold, noborder, usebackground, ...rest } = props;\n return {header}
\n {show && {children}
}\n {bottomChildren}
}\n {children}
\n {/* ICONS */}\n {(showComments || showDelete) && (\n \n )}\n \n );\n }\n}\n\nconst containerColor = css`\n ${({ colorIndex, theme }) =>\n colorIndex !== undefined ? theme.getToolColor(colorIndex) : '#D9D9D9'}\n`;\n\nconst ToolInputContainer = styled(ToolInputContainerComponent)`\n &&& {\n height: ${props => props.height};\n div > .ant-input {\n min-height: ${props => props.textAreaMinHeight};\n }\n\n .center-column {\n flex: 1;\n max-width: ${({ showDelete }) => (showDelete ? 'calc(100% - 30px)' : '100%')};\n\n .ant-form-item {\n margin-bottom: 0;\n }\n\n .ant-form-item-label {\n display: none;\n }\n }\n\n .comment-icon {\n display: inline-flex;\n align-items: center;\n }\n\n .select-input {\n margin-inline: 4px;\n display: flex;\n\n > * {\n cursor: ${({ onSelectClick, empty }) => {\n switch (true) {\n case Boolean(onSelectClick):\n return 'pointer';\n case empty:\n return 'not-allowed';\n default:\n return 'default';\n }\n }};\n color: ${containerColor};\n vertical-align: bottom;\n }\n }\n\n .icon-row {\n display: flex;\n align-items: center;\n height: 35px;\n margin-right: 10px;\n & > * {\n font-size: 18px;\n margin: 0 3px;\n transition: all 0.3s ease;\n vertical-align: middle;\n color: ${({ theme }) => theme.greyColor};\n &.active,\n &:hover {\n color: ${({ theme }) => theme.secondaryColor};\n }\n &:first-child {\n margin-left: 6px;\n }\n &:last-child {\n margin-right: 0;\n }\n }\n }\n }\n`;\n\nexport default ToolInputContainer;\n","// Libraries\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { CheckCircleOutlined } from '@ant-design/icons';\n\n// Components\nimport { P } from 'components/fontSystem';\n\nconst IntroStep = props => {\n const { text, ...rest } = props;\n return (\n \n
\n );\n};\n\nIntroStep.propTypes = {\n text: PropTypes.string.isRequired,\n};\n\nconst StyledStep = styled(IntroStep)`\n &&& {\n display: flex;\n align-items: start;\n font-size: 16px;\n .anticon {\n color: ${({ theme }) => theme.primaryColor};\n vertical-align: middle;\n margin-right: 10px;\n }\n }\n`;\n\nexport default StyledStep;\n","// Libraries\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeProvider } from 'styled-components';\n\n// Dependencies\nimport { Tool } from 'models/Tools';\nimport withTranslations from 'hocs/withTranslations';\nimport { parrotTheme } from 'styles/themes';\nimport queryString from 'utils/queryString';\n\n// Components\nimport { Col } from 'antd';\nimport { P, H2, H3 } from 'components/fontSystem';\nimport { Panel, Button, VideoIframe, VideoThumbnail } from 'components/elements';\nimport { Row } from 'components/layout';\nimport BfbModal from 'components/elements/Modal/BfbModal';\nimport IntroStep from './IntroStep';\nimport IntroHeader from './Header';\n\nfunction ToolIntro(props) {\n const {\n backgroundImage,\n className,\n description,\n onButtonClick,\n steps,\n t,\n title,\n tool,\n tooltipContent,\n } = props;\n\n const [introVideoVisible, setIntroVideoVisible] = React.useState(false);\n\n const getEmbed = () => {\n const queryParams = queryString.parse(window.location.search);\n return queryParams.embed;\n };\n const isEmbed = getEmbed();\n\n return (\n \n {` ${text}`}\n
\n{description}
\n{t(\"In this tool you'll go step by step to:\")}
\n\n {steps.map(step => (\n
\n {tool.intro_video_url && (\n {t('What will I learn?')}
\n\n {title}\n
\n \n{contentDescription}
\n \n {tooltip}
\n ) : (\n i\n )}\n \n );\n};\n\nToolPopover.propTypes = {\n content: PropTypes.node.isRequired,\n tooltip: PropTypes.node,\n placement: PropTypes.string,\n};\n\nToolPopover.defaultProps = {\n tooltip: undefined,\n placement: 'bottom',\n};\n\nconst StyledToolPopover = styled(ToolPopover).attrs({\n overlayClassName: 'tool-icon-popover-teal',\n})`\n user-select: none;\n ${({ tooltip }) =>\n tooltip\n ? css`\n display: inline-block;\n width: fit-content;\n `\n : css`\n width: 21px;\n height: 21px;\n color: white !important;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 100%;\n background-color: #b3b3b3;\n &:hover {\n background: ${({ theme }) => theme.secondaryColor};\n }\n `}\n`;\n\nexport default StyledToolPopover;\n","// Libraries\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\n// Components\nimport { Toggle } from 'components/elements';\nimport { InfoText } from 'components/fontSystem';\n\nexport default function ToolToggle(props) {\n const { colorIndex, children, className, toggleName, onChange, textStyle, ...rest } = props;\n\n function onChangeHandler(checked, event) {\n if (onChange) {\n onChange(checked, event, toggleName);\n }\n }\n\n return (\n \n \n
\n );\n};\n\nRawTypeOverviewTag.propTypes = {\n colorIndex: PropTypes.number.isRequired,\n text: PropTypes.string.isRequired,\n};\n\nconst divColor = css`\n ${({ colorIndex, theme }) =>\n colorIndex !== undefined ? theme.getToolColor(colorIndex) : '#D9D9D9'}\n`;\n\nconst TypeOverviewTag = styled(RawTypeOverviewTag)`\n display: inline-block;\n margin-right: 30px;\n -webkit-print-color-adjust: exact;\n h4 {\n display: inline-block;\n }\n .square {\n background-color: ${divColor};\n border-radius: 4px;\n display: inline-block;\n height: 25px;\n margin-right: 10px;\n vertical-align: top;\n width: 25px;\n }\n`;\n\nexport default TypeOverviewTag;\n","// Libraires\nimport React, { useState, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\n\n// Components\nimport ToolSelect from '../ToolSelect/index';\nimport { ToolDefaultInput } from '../index';\nimport Form from 'components/elements/Form';\n\nconst ACTIVE_INPUT_TEXTAREA = 'textarea';\n\nconst RawTypeTextInput = props => {\n const {\n className,\n form,\n name,\n onBlur,\n onBlurText,\n onBlurType,\n options,\n typeRequired,\n shouldNotDecorate,\n text,\n textInputName,\n textInputRules,\n textPlaceholder,\n type,\n noSelect,\n typeInputName,\n typePlaceholder,\n typeTextWidthRatio,\n showCount,\n ...rest\n } = props;\n\n const textFieldName = useMemo(() => textInputName || `${name}-text`, [textInputName, name]);\n const typeFieldName = useMemo(() => typeInputName || `${name}-type`, [typeInputName, name]);\n\n const [activeInput, setActiveInput] = useState(undefined);\n\n const [state, setState] = useState({\n [textFieldName]: text,\n [typeFieldName]: type,\n });\n\n const resetFieldsCallback = () => {\n if (shouldNotDecorate) {\n setState({\n [typeFieldName]: undefined,\n [textFieldName]: undefined,\n });\n form.resetFields([typeFieldName]);\n document.querySelectorAll(`textarea[name='${textFieldName}']`).forEach(input => {\n // eslint-disable-next-line\n input.value = null;\n });\n } else {\n // setTimeout will reset the input fields in an asynchronous manner\n setTimeout(() => form.resetFields([textFieldName, typeFieldName]), 0);\n }\n };\n\n const updateTextFieldsCallback = newState => {\n if (shouldNotDecorate) {\n document.querySelectorAll(`textarea[name='${textFieldName}']`).forEach(input => {\n // eslint-disable-next-line\n input.value = newState[textFieldName];\n });\n }\n };\n\n /**\n * Only used if `shouldNotDecorate` is `true`.\n */\n const checkStateValidity = (e, fn, updatedInput) => {\n const newState = {\n ...state,\n ...updatedInput,\n };\n // Validating state input fields/values.\n switch (typeRequired) {\n case true:\n if (\n newState[textFieldName] !== undefined &&\n newState[textFieldName] !== null &&\n newState[typeFieldName] !== undefined &&\n newState[typeFieldName] !== null &&\n fn\n ) {\n fn(e, [name, newState], resetFieldsCallback, () => updateTextFieldsCallback(newState));\n }\n break;\n case false:\n default:\n if (newState[textFieldName] !== undefined && newState[textFieldName] !== null && fn) {\n fn(e, [name, newState], resetFieldsCallback, () => updateTextFieldsCallback(newState));\n }\n }\n return newState;\n };\n\n const onBlurHandler = (e, fn) => {\n if (shouldNotDecorate) {\n const value = e && e.target && e.target.value;\n const inputName = e && e.target && e.target.name;\n if (inputName === textFieldName && value !== state[textFieldName]) {\n setState(checkStateValidity(e, fn, { [textFieldName]: value }));\n }\n if (inputName === typeFieldName && value !== state[typeFieldName]) {\n setState(checkStateValidity(e, fn, { [typeFieldName]: value }));\n }\n } else {\n form.validateFields([textFieldName, typeFieldName]).then(values => {\n if (fn) fn(e, [name, values], resetFieldsCallback);\n });\n }\n };\n\n const handleTypeOnChange = event => {\n if (onBlurType) {\n onBlurHandler(event, onBlurType);\n } else if (onBlur) {\n onBlur(event);\n }\n };\n\n const getTypeInitialValue = () => {\n if (noSelect) {\n return 0;\n }\n if (type !== null) {\n return type;\n }\n return undefined;\n };\n\n return (\n \n {text}\n
\n{t('Upload your latest work')}
\n \n{title}
}\n\n
\n );\n\n const uploadProps = {\n beforeUpload: file => {\n const isJpgOrPng =\n file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png';\n if (!isJpgOrPng) {\n message.warning(t('You can only upload JPG/PNG file.'));\n }\n const isLt2M = file.size < fileSize * 1000000;\n if (!isLt2M) {\n message.warning(\n format(\n t('Your file size is too big. Please, try a smaller file size. (%(fileSize)sMB max.)'),\n { fileSize }\n )\n );\n }\n if (isJpgOrPng && isLt2M) {\n getCroppedImage(file)\n .then(() => {\n onFileChange(file);\n })\n .catch(() => {});\n }\n return false;\n },\n };\n\n const onDeleteHandler = event => {\n event.stopPropagation();\n if (onDelete) onDelete();\n };\n\n return (\n <>\n {imageUrls.map(imageUrl => (\n \n {placeholderText ?? t('Upload')}\n
\n{infotext}
;\n break;\n default:\n infoContent = HTMLinfotext ? (\n \n
\n);\n\nRawLoader.propTypes = {\n className: PropTypes.string,\n transparent: PropTypes.bool,\n};\n\nconst Loader = styled(RawLoader)`\n &&& {\n font-size: 40px;\n cursor: default;\n ${({ type }) =>\n type === 'secondary'\n ? css`\n text-align: center;\n `\n : css`\n position: absolute;\n top: 50%;\n left: 50%;\n `}\n\n i {\n font-size: 40px;\n margin: 10px;\n }\n }\n`;\n\nexport default Loader;\n","import { Flex, Spin } from 'antd';\n\nconst LoadingPlaceholder = ({ height = 50, width = 160 }) => (\n \n {t('App. In Progress')}\n {data.in_progress}\n
\n \n {t('App Submitted')}\n {data.submitted}\n
\n \n \n {t('Completion Rate')}\n {data.completion_rate} %\n
\n \n {t('Rejection Rate')}\n \n {data.rejection_rate} %\n \n
\n \n \n {t('App. Approved')}\n {data.approved.approved}\n
\n \n {t('App. Dropped')}\n \n {data.approved.dropped}\n \n
\n \n \n {t('Acceptance Rate')}\n {data.approved.acceptance_rate} %\n
\n \n {t('Dropped Rate')}\n \n {data.approved.dropped_rate} %\n \n
\n \n \n {t('Application Goal Completion ')}(%){' '}\n {t('= Application Submitted ')}(\n {data.program_goals.application_count})\n {t(' / Application Goal ')}(\n {data.program_goals.application_goal}) * 100%\n
\n \n }\n trigger=\"hover\"\n >\n\n {t('Approval Goal Completion ')}(%){' '}\n {t('= Application Approved ')}(\n {data.program_goals.approval_count})\n {t(' / Approval Goal ')}(\n {data.program_goals.approval_goal}) * 100%\n
\n \n }\n trigger=\"hover\"\n >\n\n {t('Incubation Goal Completion ')}(%){' '}\n {t('= Projects in Incubation ')}(\n {data.program_goals.incubation_count})\n {t(' / Incubation Goal ')}(\n {data.program_goals.incubation_goal}) * 100%\n
\n \n }\n trigger=\"hover\"\n >\n\n
\n \n
\n {t('Application Goal')}
\n {data.program_goals.application_goal}\n\n
\n {t('Approval Goal')}
\n \n {data.program_goals.approval_goal}\n \n\n
\n {t('Incubation Goal')}
\n \n {data.program_goals.incubation_goal}\n \n{renderedIcon}
}\n {/* Content column */}\n \n {/* Title */}\n {title && (\n
\n \n {title}\n
\n )}\n {/* Text or other content */}\n {children || }\n\n \n {/* HEAD */}\n \n {/* HEAD ROW */}\n \n {/* BODY */}\n {fixedLeftTableBody} \n \n
\n )}\n {/* WIP */}\n {fixedRightColumns && null}\n {/* LOADING SPINNER COMP */}\n \n max ? '#F25A5A' : '#999999'}`,\n }}\n >\n {`${inputLength}/${max}`}\n \n )}\n
\n {/* ICONS */}\n {showComments && (\n \n )}\n {description}
\n )}\n \n \n {buttonValue}\n \n
\n \n );\n};\n\nErrorModal.propTypes = {\n onCancel: PropTypes.func.isRequired,\n visible: PropTypes.bool,\n type: PropTypes.string,\n title: PropTypes.string,\n buttonValue: PropTypes.string,\n description: PropTypes.string,\n dangerDescription: PropTypes.func,\n dangerHTML: PropTypes.bool,\n};\n\nErrorModal.defaultProps = {\n visible: false,\n dangerDescription: null,\n type: '',\n title: '',\n buttonValue: '',\n description: '',\n dangerHTML: false,\n};\n\nexport default ErrorModal;\n","import React from 'react';\n\nclass APIComponent extends React.Component {\n // FIXME: React team discourages to use class inheritance\n\n state = {\n results: [], //eslint-disable-line\n };\n\n componentDidMount = () => {\n this.getResults().then(payload => {\n this.setState({ results: payload.data }); //eslint-disable-line\n });\n };\n\n /**\n * Function that fetchs results\n * Not implemented because other classes will inherit this class\n * @return {array} - Returns the results as an array\n */\n getResults = () => console.log('getResults not implemented'); //eslint-disable-line\n\n /**\n * Callback that returns the text for a result\n * Not implemented because other classes will inherit this class\n * @param {object} - Result from getResult function\n * @return {string} - Returns a string\n */\n getText = result => console.log('getText not implemented'); //eslint-disable-line\n getValue = result => result.id;\n getKey = result => this.getValue(result);\n}\n\nexport default APIComponent;\n","export const BAR_CHART_AVERAGE_LINE = '__bar-chart-average-line';\nexport const BAR_CHART_LINE = '__bar-chart-line';\n\n/**\n * **COPIED FROM LODASH**\n * **THIS WILL LIMIT THE ABSOLUTELY POSITIONED ELEMENTS TO:**\n * - **A MINIMUM OF 0%.**\n * - **A MAXIMUM OF 100%.**\n *\n * The base implementation of `_.clamp` which doesn't coerce arguments.\n *\n * @private\n * @param {number} number The number to clamp.\n * @param {number} [lower] The lower bound.\n * @param {number} upper The upper bound.\n * @returns {number} Returns the clamped number.\n */\nexport const baseClamp = (number, lower, upper) => {\n if (typeof number === 'number') {\n if (upper !== undefined) {\n return number <= upper ? number : upper;\n }\n if (lower !== undefined) {\n return number >= lower ? number : lower;\n }\n }\n return number;\n};\n\n/**\n * Worker functon depending if the `dataValue` is an array (in case it's a stacked column).\n * Also evaluates if the value should affect the average.\n */\nexport const getValue = dataValue => {\n let averageDenominators = 0;\n const isValueArray = Array.isArray(dataValue);\n if (isValueArray) {\n const totalValue = dataValue.reduce((accumulator, dataVal) => {\n if (!dataVal.shouldNotAffectAverage) averageDenominators += 1;\n return accumulator + dataVal.value;\n }, 0);\n return [totalValue, averageDenominators];\n }\n return [dataValue.value, dataValue.shouldNotAffectAverage ? 0 : 1];\n};\n\n/**\n * Worker function that calculates the total average and highest value of the chart.\n */\nexport const calculateChartValues = data => {\n // Increasing performance by calculating the average and denominators from an upper scope:\n let highestValue = 0;\n let averageDenominators = 0;\n const avg =\n data.reduce((accumulator, dataValue) => {\n const [value, denominators] = getValue(dataValue);\n averageDenominators += denominators;\n // Storing the highest value\n if (!highestValue) {\n highestValue = Number(value) || 0;\n } else if (Number(value) > Number(highestValue)) {\n highestValue = Number(value);\n }\n // If there are no denominators, then we should NOT affect the the accumulator.\n return denominators ? Number(accumulator) + Number(value) : Number(accumulator);\n }, 0) / averageDenominators || 0;\n return [highestValue, avg];\n};\n\n// The chart lines and upper container have a top spacing distance\n// of 25px to allow for indicators at the top of the chart bars.\nexport const TOP_INDICATOR_SPACING = '25px';\n","// Libraries\nimport React, { useContext, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\n\n// Dependencies\nimport TranslationsContext from 'providers/translationsProvider';\nimport currencies, { formatCurrency } from 'utils/currencies';\n\n// Components\nimport { InfoText } from 'components/fontSystem';\n\nexport const LegendLine = props => {\n const { average, name, value, currency, colorIndex, dashed, bold } = props;\n\n const { t } = useContext(TranslationsContext);\n\n const isValueArray = Array.isArray(value);\n\n const formatCurrencyValue = useCallback(\n (val, shouldPrintEmpty) => {\n const selectedCurrency = currencies[currency] || {};\n return value || shouldPrintEmpty ? formatCurrency(selectedCurrency, val) : 'N/A';\n },\n [currency, value]\n );\n\n return (\n \n \n \n {(name || average) && (\n \n {average ? t(\"Competitor's Average\") : name}:\n \n )}\n \n {isValueArray ? (\n \n {'['}\n {value.map((val, index) => {\n const isLast = index === value.length - 1;\n return `${formatCurrencyValue(val)}${isLast ? '' : '- '}`;\n })}\n {']'}\n \n ) : (\n formatCurrencyValue(value)\n )}\n \n
\n );\n};\n\nLegendLine.propTypes = {\n average: PropTypes.bool,\n name: PropTypes.node,\n value: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Array)]),\n currency: PropTypes.number,\n colorIndex: PropTypes.number,\n dashed: PropTypes.bool,\n bold: PropTypes.bool,\n};\n\nLegendLine.defaultProps = {\n average: false,\n name: undefined,\n value: undefined,\n currency: undefined,\n colorIndex: undefined,\n dashed: true,\n bold: true,\n};\n\nconst Legend = styled.div`\n display: inline-flex;\n align-self: flex-start;\n justify-content: center;\n align-items: flex-start;\n flex-flow: column;\n padding: 20px;\n width: 240px;\n border: 1px solid #d9d9d9;\n border-radius: 4px;\n ${({ placement = 'right' }) => {\n if (placement === 'left') {\n return css`\n order: -1;\n margin-right: 30px;\n `;\n }\n return css`\n margin-left: 30px;\n `;\n }}\n`;\n\nconst LegendLineContainer = styled.div`\n display: flex;\n justify-content: flex-start;\n align-items: center;\n height: 25px;\n`;\n\nconst StyledLegendLine = styled.div`\n transition: bottom ease 200ms;\n will-change: bottom;\n width: 50px;\n height: 2px;\n border-bottom: 2px ${({ dashed }) => (dashed ? 'dashed' : 'solid')}\n ${({ theme, colorIndex }) =>\n colorIndex !== undefined ? theme.getToolColor(colorIndex) : '#999999'};\n display: flex;\n justify-content: flex-start;\n align-content: center;\n flex-wrap: nowrap;\n`;\n\nexport default Legend;\n","// Libraries\nimport styled, { css } from 'styled-components';\n\n// Components\nimport { Span } from 'components/fontSystem';\n\nconst Indicator = styled(Span)`\n position: absolute;\n white-space: nowrap;\n ${({ placement }) => {\n switch (placement) {\n case 'bottom':\n return css`\n top: 0;\n `;\n case 'top':\n default:\n return css`\n bottom: 0;\n `;\n }\n }}\n z-index: 2;\n margin: 2px 0;\n padding: 1px;\n border-radius: 4px;\n background-color: ${({ indicatorBackgroundColor, backgroundColor }) =>\n indicatorBackgroundColor || `${backgroundColor}80`};\n`;\n\nexport default Indicator;\n","// Libraries\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\n\nimport { baseClamp, TOP_INDICATOR_SPACING } from '../dependencies';\n\nconst LineComponent = props => {\n const { children, ...rest } = props;\n return (\n {title}
}\n{text}
\n{text}
);\n\n return (\n\n {/* Field Label */}\n {(icon || decorator) && (\n
\n );\n};\n\nconst StyledFieldWithDecorator = styled(FieldWithDecorator)`\n margin-top: ${props => props.mt || '15px'};\n width: ${props => props.width || ''};\n overflow: hidden;\n\n .label {\n margin-bottom: 10px;\n\n display: flex;\n gap: 10px;\n }\n\n b {\n color: ${props => props.color || 'black'};\n font-weight: ${props => props.fweight || '600'};\n margin-right: 5px;\n }\n\n .icon {\n width: 20px;\n }\n\n .flag {\n height: auto;\n width: 22px;\n margin-right: 5px;\n }\n\n p {\n line-height: 22px;\n display: inline;\n padding-left: ${props => (props.flag ? '10px' : '0px')};\n }\n\n &:has(.icon) .field-content {\n margin-left: 30px;\n }\n`;\n\nFieldWithDecorator.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string.isRequired,\n decorator: PropTypes.string,\n dummy: PropTypes.node,\n flag: PropTypes.node,\n icon: PropTypes.node,\n text: PropTypes.node,\n infotext: PropTypes.string,\n};\n\nexport default StyledFieldWithDecorator;\n","// This icon file is generated automatically.\nvar InboxOutlined = { \"icon\": { \"tag\": \"svg\", \"attrs\": { \"viewBox\": \"0 0 1024 1024\", \"focusable\": \"false\" }, \"children\": [{ \"tag\": \"path\", \"attrs\": { \"d\": \"M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z\" } }] }, \"name\": \"inbox\", \"theme\": \"outlined\" };\nexport default InboxOutlined;\n","import _extends from \"@babel/runtime/helpers/esm/extends\";\n// GENERATE BY ./scripts/generate.ts\n// DON NOT EDIT IT MANUALLY\n\nimport * as React from 'react';\nimport InboxOutlinedSvg from \"@ant-design/icons-svg/es/asn/InboxOutlined\";\nimport AntdIcon from \"../components/AntdIcon\";\nvar InboxOutlined = function InboxOutlined(props, ref) {\n return /*#__PURE__*/React.createElement(AntdIcon, _extends({}, props, {\n ref: ref,\n icon: InboxOutlinedSvg\n }));\n};\n\n/** */\nvar RefIcon = /*#__PURE__*/React.forwardRef(InboxOutlined);\nif (process.env.NODE_ENV !== 'production') {\n RefIcon.displayName = 'InboxOutlined';\n}\nexport default RefIcon;","import React from 'react';\nimport styled from 'styled-components';\nimport { Upload } from 'antd';\nimport { InboxOutlined } from '@ant-design/icons';\nimport PropTypes from 'prop-types';\nimport withTranslations from 'hocs/withTranslations';\n\nconst { Dragger } = Upload;\n\nconst StyledDragger = styled(Dragger)`\n &&& {\n .ant-upload.ant-upload-drag {\n padding: 40px;\n }\n .ant-upload-drag-icon .anticon.anticon-inbox {\n color: ${props => props.theme.primaryColor};\n }\n }\n`;\n\nconst FileDragger = props => {\n const { t } = props;\n return (\n \n {icon && 
}\n {decorator && {decorator}}\n {infotext &&
\n )}\n\n {/* Field Content */}\n \n {flag &&
\n {dummy || '—'}
}\n\n
{t('Click or drag file to this area to upload')}
\n{t('(Size: 900px x 500px)')}
\n{t('(Max file size: 1MB / Required format: .jpg, .png)')}
\n\n
\n );\n};\n\nHeader.propTypes = {\n className: PropTypes.string.isRequired,\n children: PropTypes.node.isRequired,\n title: PropTypes.string.isRequired,\n};\n\nconst StyledHeader = styled(Header)`\n background-image: none;\n border-radius: 4px;\n color: white;\n background-color: ${({ theme }) => theme.primaryColor};\n margin: 0 0 20px;\n padding: 30px;\n\n > * {\n color: white;\n }\n`;\n\nexport default StyledHeader;\n","// This icon file is generated automatically.\nvar TwitterOutlined = { \"icon\": { \"tag\": \"svg\", \"attrs\": { \"viewBox\": \"64 64 896 896\", \"focusable\": \"false\" }, \"children\": [{ \"tag\": \"path\", \"attrs\": { \"d\": \"M928 254.3c-30.6 13.2-63.9 22.7-98.2 26.4a170.1 170.1 0 0075-94 336.64 336.64 0 01-108.2 41.2A170.1 170.1 0 00672 174c-94.5 0-170.5 76.6-170.5 170.6 0 13.2 1.6 26.4 4.2 39.1-141.5-7.4-267.7-75-351.6-178.5a169.32 169.32 0 00-23.2 86.1c0 59.2 30.1 111.4 76 142.1a172 172 0 01-77.1-21.7v2.1c0 82.9 58.6 151.6 136.7 167.4a180.6 180.6 0 01-44.9 5.8c-11.1 0-21.6-1.1-32.2-2.6C211 652 273.9 701.1 348.8 702.7c-58.6 45.9-132 72.9-211.7 72.9-14.3 0-27.5-.5-41.2-2.1C171.5 822 261.2 850 357.8 850 671.4 850 843 590.2 843 364.7c0-7.4 0-14.8-.5-22.2 33.2-24.3 62.3-54.4 85.5-88.2z\" } }] }, \"name\": \"twitter\", \"theme\": \"outlined\" };\nexport default TwitterOutlined;\n","import _extends from \"@babel/runtime/helpers/esm/extends\";\n// GENERATE BY ./scripts/generate.ts\n// DON NOT EDIT IT MANUALLY\n\nimport * as React from 'react';\nimport TwitterOutlinedSvg from \"@ant-design/icons-svg/es/asn/TwitterOutlined\";\nimport AntdIcon from \"../components/AntdIcon\";\nvar TwitterOutlined = function TwitterOutlined(props, ref) {\n return /*#__PURE__*/React.createElement(AntdIcon, _extends({}, props, {\n ref: ref,\n icon: TwitterOutlinedSvg\n }));\n};\n\n/** */\nvar RefIcon = /*#__PURE__*/React.forwardRef(TwitterOutlined);\nif (process.env.NODE_ENV !== 'production') {\n RefIcon.displayName = 'TwitterOutlined';\n}\nexport default RefIcon;","import React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { Button } from 'components/elements';\nimport {\n TYPE_INSTAGRAM,\n TYPE_FACEBOOK,\n TYPE_TWITTER,\n TYPE_WEBSITE,\n TYPE_LINKEDIN,\n} from 'components/SocialNetworksInput/constants';\nimport {\n FacebookOutlined,\n TwitterOutlined,\n InstagramOutlined,\n GlobalOutlined,\n LinkedinOutlined,\n} from '@ant-design/icons';\n\nconst IconRow = props => {\n const { className, linkedin, links } = props;\n const iconMap = new Map([\n [TYPE_INSTAGRAM, {title}
\n {props.children}\n\n {linkedinExists === undefined && linkedin && linkedin !== '' && (\n \n \n \n )}\n {links &&\n links.map(link => (\n \n \n \n ))}\n
\n );\n};\n\nconst StyledIconRow = styled(IconRow)`\n margin: ${({ noMargin }) => (noMargin ? 0 : '20px 0')};\n display: flex;\n gap: 10px;\n\n button.ant-btn.ant-btn-icon-only {\n width: 22px;\n display: grid;\n place-items: center;\n }\n`;\n\nIconRow.propTypes = {\n className: PropTypes.string.isRequired,\n links: PropTypes.node,\n linkedin: PropTypes.string,\n};\n\nIconRow.defaultProps = {\n linkedin: '',\n links: [],\n};\n\nexport default StyledIconRow;\n","import styled from 'styled-components';\n\nconst Img = styled.img`\n width: ${props => props.width || '100%'};\n height: ${props => props.height || ''};\n`;\n\nexport default Img;\n","import React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { Select as AntSelect } from 'antd';\nimport withTranslations from 'hocs/withTranslations';\n\nconst MultiSelect = props => {\n const handleBlur = (value, option) => {\n if (props.onBlur) {\n const event = {\n target: { name: props.name, value, ...option },\n };\n props.onBlur(event);\n }\n };\n const handleChange = (value, option) => {\n if (props.onChange) {\n const event = {\n target: { name: props.name, value, ...option },\n };\n props.onChange(event);\n }\n };\n const { t, children, ...rest } = props;\n return (\n \n
\n );\n};\n\nconst Div = styled.div`\n ${({ matchCard }) =>\n matchCard &&\n `\n position: absolute;\n top: 7px;\n right: 10px;\n `}\n`;\n\nMatchAffinity.propTypes = {\n value: PropTypes.number.isRequired,\n matchCard: PropTypes.bool,\n};\n\nMatchAffinity.defaultProps = {\n matchCard: false,\n};\n\nexport default MatchAffinity;\n","// Libraries\nimport React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\n\n// Components\nimport { Select } from 'antd';\nimport Icon from '@ant-design/icons';\nimport { Span } from 'components/fontSystem';\n\n// Dependencies\nimport { useDispatch } from 'react-redux';\nimport styled from 'styled-components';\nimport TranslationsContext from 'providers/translationsProvider';\nimport { potentialMatchOptions as options } from 'models/Matching/Interestship';\n\n// Actions and selectors\nimport { actions as interestshipActions } from 'store/modules/Matching/interestship';\nimport bfbTheme from 'styles/b4b-theme';\n\nfunction PotentialMatch(props) {\n const { application, invite, currentValue, onInvitesUpdate, agreementSent, isVacancyFull } =\n props;\n const { t } = useContext(TranslationsContext);\n const dispatch = useDispatch();\n const { updateInterestship } = interestshipActions;\n\n const handleSelection = value => {\n if (!application) return;\n\n dispatch(\n updateInterestship(\n {\n id: invite.id,\n program: invite.program,\n potential_match_level: value,\n },\n () => onInvitesUpdate(application.id)\n )\n );\n };\n\n // checking currentValue.value type, when value is 0 it was returning FALSE\n const defaultValue =\n currentValue &&\n currentValue.value !== undefined &&\n currentValue.value !== null &&\n currentValue.value;\n\n return (\n \n \n {t('CAPACITY')}\n {capacity}\n \n \n {t('MATCHED')}\n {mentees}\n \n \n {t('WILLING TO MENTOR')}\n {rankingMaxProjects}\n \n \n {t('CO-MENTOR?')}\n \n {openTocoMentor}\n \n
\n {!isInModal && \n })
\n {`${owner.first_name} ${owner.last_name}`} \n
\n {type === 'ranked' && !isInModal && (\n \n
\n )}\n {rankingReasons ?? t('No ranking data received yet.')}
\n \n{t('Friendly reminder about your browser')}
,\n description: (\n{t('Friendly reminder about your browser')}
,\n description: (\n{ventureSummaryBanner ? '1' : '2'}
\n )}\n \n\n {/* Text */}\n{title}
\n \n \n{title}
}\n{message}
\n \n\n {t('Password Strength:')} {statusMessage}\n
\n \n{t('Your password should be at least 8 characters long.')}
\n \n );\n\n const popoverAlignment = {\n points: ['tr', 'br'],\n offset: [18, 20],\n targetOffset: ['30%', '40%'],\n };\n\n return (\n <>\n{title}
\n\n {startDate} - {endDate}\n
\n\n
\n );\n};\n\nconst StyledProgressBar = styled(ProgressBar)`\n width: 98%;\n .value-container {\n display: flex;\n justify-content: space-between;\n height: 25px;\n .ant-btn {\n padding: 0;\n }\n .percent {\n display: ${({ $showPercentage }) => !$showPercentage && 'none'};\n }\n }\n .ant-progress-inner {\n width: 100%;\n background-color: ${({ theme }) => theme.lightGrey};\n }\n .ant-progress-bg {\n background-image: linear-gradient(to right, #123dc6, #00ffaf);\n height: 10px !important;\n }\n`;\n\nProgressBar.propTypes = {\n title: PropTypes.string.isRequired,\n className: PropTypes.string.isRequired,\n hideWhatsLeft: PropTypes.bool,\n percent: PropTypes.number.isRequired,\n showPercentage: PropTypes.bool,\n onClick: PropTypes.func.isRequired,\n};\nProgressBar.defaultProps = {\n hideWhatsLeft: false,\n showPercentage: false,\n};\n\nexport default StyledProgressBar;\n","// Libraries\nimport styled from 'styled-components';\n\n// Components\nimport { Progress as ProgressCirlce } from 'antd';\n\nconst StyledProgressCircle = styled(ProgressCirlce)`\n .ant-progress-inner {\n mask circle {\n stroke-linecap: round;\n }\n .ant-progress-text {\n color: ${props => props.color || props.theme.primaryColor};\n font-weight: 600;\n font-size: 20px;\n }\n .ant-progress-circle-path {\n stroke: ${props =>\n props.strokeColor || props.progressColor || props.theme.primaryColor} !important;\n }\n .ant-progress-circle-trail {\n stroke: ${props => props.opacity || '#f3f3f3'} !important;\n }\n }\n .value-container {\n display: flex;\n justify-content: space-between;\n height: 25px;\n }\n`;\n\nexport default StyledProgressCircle;\n","// Libraries\nimport PropTypes from 'prop-types';\nimport { useContext } from 'react';\nimport styled from 'styled-components';\n\n// Components\nimport PhoneInput from 'react-phone-input-2';\n\n// Dependencies\nimport TranslationsContext from 'providers/translationsProvider';\nimport bfbTheme from 'styles/b4b-theme';\nimport 'styles/phoneinput.css';\n\nconst PhoneNumberInput = ({ id, value, onChange }) => {\n const { t } = useContext(TranslationsContext);\n\n return (\n \n {title}\n {isProgressComplete && !hideWhatsLeft && (\n \n )}\n \n {t(`${percent}%`)}\n \n
\n \n onChange(`+${phone}`)}\n />\n
\n );\n};\n\nconst StyledPhoneInput = styled(PhoneInput)`\n &&& {\n .phone-input-button {\n .selected-flag:hover,\n .selected-flag:focus {\n background-color: transparent;\n }\n }\n\n ::placeholder {\n font-size: 15px;\n font-style: italic;\n font-weight: 100;\n color: ${bfbTheme.grey};\n }\n }\n`;\n\nPhoneNumberInput.propTypes = {\n // id is coming from the Form.Item as a prop;\n // all custom inputs need this id so the form.scrollToField method works properly\n id: PropTypes.string,\n value: PropTypes.string,\n onChange: PropTypes.func,\n};\n\nPhoneNumberInput.defaultProps = {\n id: null,\n value: null,\n onChange: null,\n};\n\nexport default PhoneNumberInput;\n","import React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { Radio as AntRadio } from 'antd';\nimport bfbTheme from 'styles/b4b-theme';\n\nconst Radio = props => {\n const { children, ...rest } = props;\n return (\n {title}
}\n {tagline &&{tagline}
}\n {handleDownload && (\n\n \n
\n \n
\n \n {fullName}\n
\n\n {roleType}\n
\n{props.title}
\n \nFinancial Forecast
module ready for review.'\n ),\n replacements\n ),\n }}\n />\n );\n default:\n return null;\n }\n};\n\nconst { listNotifications, updateNotification } = notificationsActions;\n\nconst PAGE_SIZE = 10;\n\nconst getPagination = page => ({\n limit: PAGE_SIZE,\n offset: (page - 1) * PAGE_SIZE,\n});\n\nconst NotificationsContent = ({\n isVisible = false,\n onNotificationClick = null,\n projectId = undefined,\n mentorProjectIds = [],\n ventureId = undefined,\n isMember,\n isMentor,\n}) => {\n const { t, format } = useContext(TranslationsContext);\n const dispatch = useDispatch();\n const navigate = useNavigate();\n\n const notifications = useSelector(notificationsSelectors.getNotificationsList);\n const totalNotificationsCount = useSelector(notificationsSelectors.getTotalNotificationsCount);\n\n const [state, setState] = React.useState({\n initLoading: true,\n page: 1,\n checked: false,\n });\n\n const onLoadMore = () => {\n const pagination = getPagination(state.page).offset;\n if (pagination < totalNotificationsCount) {\n setState(prevState => ({ ...prevState, page: prevState.page + 1 }));\n }\n };\n\n React.useEffect(() => {\n const filters = {\n seen_at__isnull: state.checked ? 1 : null,\n clear: state.page === 1,\n };\n if (isVisible) {\n dispatch(\n listNotifications(\n {\n ...filters,\n ...getPagination(state.page),\n },\n () => setState(prevState => ({ ...prevState, initLoading: false }))\n )\n );\n }\n }, [dispatch, state.checked, state.page, isVisible]);\n\n React.useEffect(() => {\n if (isVisible) {\n setState(prevState => ({ ...prevState, initLoading: true, page: 1 }));\n }\n }, [isVisible]);\n\n const handleRadioClick = notification => {\n dispatch(\n updateNotification({\n id: notification.id,\n seen_at: notification.seen_at ? null : dayjs().utc().format('YYYY-MM-DDTHH:mm:ssZ'),\n })\n );\n };\n\n const handleSwitch = checked => {\n setState(prevState => ({ ...prevState, page: 1, checked }));\n };\n\n const handleListItemClick = notification => {\n onNotificationClick(false);\n if (notification.seen_at === null) {\n handleRadioClick(notification);\n }\n const parentId = notification.parent_object.id;\n const id =\n (notification &&\n notification.parent_object &&\n notification.parent_object.project &&\n mentorProjectIds &&\n mentorProjectIds.find(singleId => singleId === notification.parent_object.project.id)) ||\n (ventureId && ventureId !== undefined ? ventureId : projectId);\n\n switch (notification.verb) {\n case Notifications.INVITE_SENT:\n case isMember && Notifications.INVITE_SIGN_PENDING:\n return navigate(`/program/${parentId}/matching?tab=2`);\n case Notifications.INVITE_REJECTED_BY_E:\n return navigate(`/mentor-matching/${parentId}/explore?tab=1`);\n case Notifications.INVITE_ACCEPTED:\n case isMentor && Notifications.INVITE_SIGN_PENDING:\n return navigate(`/mentor-matching/${parentId}/explore?tab=2`);\n case Notifications.INVITE_MATCHED:\n return navigate('/');\n case Notifications.E_APP_APPROVED:\n return navigate(`/program/${parentId}/accept-spot`);\n case Notifications.E_APP_REJECTED:\n return navigate('/');\n case Notifications.CREATED_COMMENT: {\n const formatLink = splitItemAsStep(notification.action_object.item).join('/');\n const tabParams = notification.action_object.scenario\n ? `scenario=${notification.action_object.scenario.id}`\n : `product=${notification.action_object.product.id}`;\n return navigate({\n pathname: `/tools/${id}/${formatLink}`,\n search: `?contentType=${notification.action_object.content_type}&id=${notification.action_object.object_id}&item=${notification.action_object.item}&${tabParams}`,\n });\n }\n case isMember && Notifications.TOOL_COMPLETED:\n return navigate(`/venture/${projectId}/workspace`);\n case isMentor && Notifications.TOOL_COMPLETED:\n return navigate(`/tools/${id}/${notification.action_object.tool.slug}/summary`);\n case Notifications.TOOL_REVIEWED:\n return navigate(`/venture/${projectId}/workspace`);\n case Notifications.FINANCIAL_SCENARIO_UPLOAD:\n return navigate(`/tools/${parentId}/financial-forecast/${notification.action_object.slug}`);\n default:\n return null;\n }\n };\n const paginationOffset = getPagination(state.page).offset;\n const { checked, initLoading } = state;\n\n return (\n <>\n\n {t('All')}\n
\n \n\n {t('Unread')}\n
\n \n{t('You have caught up with all notifications!')}
\n \n ),\n }}\n loadMore={\n\n \n
\n );\n}\n\nconst StyledBadge = styled(Badge)`\n .ant-badge-count {\n transform: translate(14%, -30%);\n min-width: 14px;\n height: 16px;\n padding: 0px 5px;\n background: #f25a5a;\n box-shadow: 0 0 0 1px ${props => (props.$toolHeader ? '#123DC6' : '#fff')};\n .ant-scroll-number-only {\n .ant-scroll-number-only-unit {\n color: white !important;\n font-size: 12px;\n line-height: ${props => (props.$isMentor ? '15px' : '15px')};\n }\n }\n }\n .ant-badge-multiple-words {\n transform: translate(30%, -26%);\n min-width: 8px;\n max-width: 24px;\n height: 13px;\n padding: 0px 4px;\n color: white !important;\n font-size: 12px;\n line-height: ${props => (props.isMentor ? '13px' : '12px')};\n }\n &.ant-badge .ant-scroll-number .ant-scroll-number-only {\n display: flex;\n }\n`;\n\nconst TITLE_PADDING = '20px';\n\nconst PopoverGlobalStyle = createGlobalStyle`\n .${OVERLAY_CLASSNAME}{\n &&&{\n font-size: 1.3em;\n vertical-align: text-top;\n font-size: 27;\n margin-right: 5;\n vertical-align: 'middle';\n }\n\n .ant-popover-inner{\n max-width: 330px;\n width: 330px;\n .ant-popover-title{\n font-size: 20px;\n font-weight: bold;\n letter-spacing: 0;\n line-height: 30px;\n padding: 4px 8px;\n color: ${({ theme }) => theme.primaryColor} !important;\n border-bottom: 0;\n ::after{\n content: \"\";\n display: block;\n height: 1px;\n margin: 10px -${TITLE_PADDING} 0;\n width: auto;\n background: ${({ theme }) =>\n `linear-gradient(to right, ${theme.primaryColor}, ${\n theme.secondaryColor || theme.primaryColor\n })`};\n }\n }\n .ant-spin-nested-loading{\n overflow: auto;\n }\n }\n }\n`;\n\nUserNotifications.propTypes = {\n project: PropTypes.instanceOf(Object).isRequired,\n isMobile: PropTypes.bool,\n toolHeader: PropTypes.bool,\n ventureId: PropTypes.number,\n projectIds: PropTypes.instanceOf(Array),\n};\n\nexport default UserNotifications;\n","import { useEffect, useRef } from 'react';\n\nexport default function useInterval(callback, delay) {\n const savedCallback = useRef();\n\n // Remember the latest function.\n useEffect(() => {\n savedCallback.current = callback;\n }, [callback]);\n\n // Set up the interval.\n useEffect(() => {\n function tick() {\n savedCallback.current();\n }\n if (delay !== null) {\n const id = setInterval(tick, delay);\n return () => clearInterval(id);\n }\n }, [delay]);\n}\n","import axios from 'axios';\n\n// Loom functions\nconst getLoomId = src => {\n const match = src.match(/(?:http?s?:\\/\\/)?(?:www\\.)?(?:loom\\.com)\\/(?:share)\\/?(.+)/);\n return match && match[1];\n};\n\nconst getLoomIframeSrc = src => {\n const loomId = getLoomId(src);\n return loomId && `//www.loom.com/embed/${loomId}`;\n};\n\n// Vimeo functions\nconst getVimeoId = src => {\n const match = src.match(/(?:http?s?:\\/\\/)?(?:www\\.)?(?:vimeo\\.com)\\/?(.+)/);\n return match && match[1];\n};\n\nconst getVimeoIframeSrc = src => {\n const vimeoId = getVimeoId(src);\n return vimeoId && `//player.vimeo.com/video/${vimeoId}`;\n};\n\nconst getVimeoThumbnail = async src => {\n const isVimeoVideo = getVimeoId(src);\n if (!isVimeoVideo) return null;\n const apiURL = `https://vimeo.com/api/oembed.json?url=${src}`;\n const response = await axios.get(apiURL);\n return response.data.thumbnail_url;\n};\n\n// Youtube functions\nconst getYoutubeId = src => {\n const match = src.match(\n /(?:http?s?:\\/\\/)?(?:www\\.)?(?:youtube\\.com|youtu\\.be)\\/(?:watch\\?v=)?(.+)/\n );\n // .split('?') here is to extract just the id, it was not working before because\n // it was getting this URL \"https://youtu.be/QtKGMfeyPUE?si=6WJePVGkuCgeUgII\" as input\n // and returning this ID as output \"ZqdzjQZr374?si=MQAxRamHscPM7wor\"\n // we just need the video id with no additional query params\n return match && match[1].split('?')[0];\n};\n\nconst getYoutubeIframeSrc = src => {\n const youtubeId = getYoutubeId(src);\n return youtubeId && `//www.youtube.com/embed/${youtubeId}`;\n};\n\nconst getYoutubeThumbnail = async src => {\n const videoId = getYoutubeId(src);\n if (!videoId) return null;\n return `http://i.ytimg.com/vi/${videoId}/mqdefault.jpg`;\n};\n\n// Combiners\nexport const getIframeSrc = src => {\n if (!src) return null;\n const vimeoURL = getVimeoIframeSrc(src);\n const youtubeURL = getYoutubeIframeSrc(src);\n const loomURL = getLoomIframeSrc(src);\n return vimeoURL || youtubeURL || loomURL;\n};\n\nexport const getThumbnail = src => {\n const promises = [getVimeoThumbnail(src), getYoutubeThumbnail(src)];\n return Promise.allSettled(promises);\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { getIframeSrc } from '../utils';\n\nconst EmptyVideo = styled.div`\n background: rgba(0, 0, 0, 0.05);\n display: inline-block;\n height: ${({ height }) => height}px;\n width: ${({ width }) => width};\n p {\n text-align: center;\n margin-top: ${({ height }) => height / 2 - 10}px;\n }\n`;\n\nconst VideoIframe = props => {\n const { src, t } = props;\n\n const iframeProps = {\n allowFullScreen: 1,\n frameBorder: 0,\n src: getIframeSrc(src),\n };\n return iframeProps.src ? (\n \n ) : (\n {t('Video preview')}
\n\n
\n {!noLine && {stage.text}
\n {stage.id < currentStep &&\n {getAdditionalInfo(t, selectedLanguage).map(data => {\n const { key: infoKey, title, questions } = data;\n return (\n
\n );\n })}\n \n \n {/* Active Question */}\n \n handleQuestionOnClick(questionData)}\n className={`question-button${isActive ? ' question-button-active' : ''}`}\n >\n •\n {t(question)}\n
\n );\n })}\n {t(title)}
\n {questions.map(questionData => {\n const { key: questionKey, question } = questionData;\n const isActive = activeQuestion.key === questionKey;\n return (\n\n
\n \n {activeQuestion.question}
\n\n {activeQuestion.answer}{' '}\n {activeQuestion.hyperLink && activeQuestion.hyperlinkText && (\n \n {t(activeQuestion.hyperlinkText)}\n \n )}\n
\n \n \n
\n );\n case SERVER_ERROR:\n return null;\n default:\n return (\n \n \n \n
\n );\n }\n };\n\n return (\n \n 
\n
\n {/* \n 
\n
\n {errorMessage.title}
\n {errorMessage.description}
\n {renderButtons()}\n \n\n
*/}\n