\n \n \n {this.props.showHeader && (\n {\n if (e.key === ENTER_KEY) {\n this.handleClose()\n }\n }}\n />\n )}\n \n )}\n
\n {this.props.leftHeader}
\n {this.props.centerHeader}
\n {this.props.showClose && (\n \n
\n )}\n {this.props.children}\n \n {this.props.showIcon && }\n \n \n \n )\n }\n}\n\nexport default cssModules(Modal, styles, { allowMultiple: true })\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport cssModules from 'react-css-modules'\nimport styles from './back_button.less'\nimport { Icon } from '@paypalcorp/pp-react'\nimport { KEY_PRESS_EVENTS } from 'shared/shared_consts'\n\nconst { ENTER_KEY } = KEY_PRESS_EVENTS\n\nclass BackButton extends React.Component {\n static propTypes = {\n onClick: PropTypes.func,\n }\n\n render() {\n return (\n \n
\n )\n }\n}\n\nexport default cssModules(IconCircle, styles)\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport cssModules from 'react-css-modules'\nimport IconCircle from 'components/common/icon_circle'\nimport styles from './rounded_progress.less'\nimport { lerp } from 'shared/helpers/math_helpers'\nimport { formatPercent } from 'client/griffin'\n\nconst GRADIENT_START_COLOR = '#0061a1'\nconst GRADIENT_END_COLOR = '#21a7ff'\n\nclass RoundedProgress extends React.Component {\n static propTypes = {\n value: PropTypes.number,\n showPercentage: PropTypes.bool,\n showProgress: PropTypes.bool,\n compact: PropTypes.bool,\n }\n\n static defaultProps = {\n showPercentage: true,\n showProgress: true,\n }\n\n normalizedValue = () => {\n return this.props.value ? Math.min(1, this.props.value) : 0\n }\n\n render() {\n let percentage = Math.min(1, this.normalizedValue().toFixed(2))\n percentage = formatPercent(percentage)\n\n return (\n \n {this.props.showProgress ? (\n
\n )\n }\n\n updateMeter = () => {\n if (!this.meter) {\n return\n }\n\n const r = 52\n const centerX = 56\n const centerY = 56\n const startAngle = 2.22\n const endAngle = lerp(\n startAngle,\n Math.PI * 2 + 0.911,\n this.normalizedValue()\n )\n\n let ctx = this.meter.getContext('2d')\n ctx.clearRect(0, 0, 112, 102)\n if (this.normalizedValue() === 0) {\n return\n }\n\n ctx.beginPath()\n ctx.lineCap = 'round'\n ctx.arc(centerX, centerY, r, startAngle, endAngle, false)\n ctx.lineWidth = 8\n let gradient = ctx.createLinearGradient(8.4137, 109.7624, 103.5863, -7.642)\n gradient.addColorStop(0, GRADIENT_START_COLOR)\n gradient.addColorStop(1, GRADIENT_END_COLOR)\n ctx.strokeStyle = gradient\n ctx.stroke()\n }\n\n componentDidMount() {\n this.updateMeter()\n }\n\n componentDidUpdate() {\n this.updateMeter()\n }\n}\n\nexport default cssModules(RoundedProgress, styles, { allowMultiple: true })\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport cssModules from 'react-css-modules'\nimport styles from './separator.less'\n\nclass Separator extends React.Component {\n static propTypes = {\n text: PropTypes.string,\n type: PropTypes.oneOf(['solid', 'dotted']),\n }\n\n static defaultProps = { type: 'solid' }\n\n render() {\n if (this.props.text) {\n return (\n \n {\n this.meter = meter\n }}\n styleName=\"meter-canvas\"\n />\n
\n ) : (\n this.props.compact && (\n \n
\n \n
\n )\n )}\n {this.props.showPercentage && this.props.showProgress ? (\n \n
\n {percentage}
\n ) : (\n ''\n )}\n \n \n {this.props.text && (\n
\n )\n }\n return \n }\n}\n\nexport default cssModules(Separator, styles, { allowMultiple: true })\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\n// This components adds a delay to react-motion animations.\n// Taken from here https://github.com/chenglou/react-motion/issues/271\n\nclass Delay extends React.Component {\n static propTypes = {\n children: PropTypes.any,\n initial: PropTypes.number,\n value: PropTypes.number,\n period: PropTypes.number,\n }\n\n static defaultProps = { period: 0 }\n state = { value: this.props.initial }\n\n refresh = props => {\n let { value, period } = props\n clearTimeout(this.timeoutToken)\n this.timeoutToken = setTimeout(() => {\n this.timeoutToken = null\n this.setState({ value })\n }, period)\n }\n\n componentWillUnmount() {\n if (this.timeoutToken) {\n clearTimeout(this.timeoutToken)\n }\n }\n\n componentDidMount() {\n this.refresh(this.props)\n }\n\n UNSAFE_componentWillReceiveProps = next => {\n this.refresh(next)\n }\n\n render() {\n // function-as-children\n return this.props.children(this.state.value)\n }\n}\n\nexport default Delay\n","const NON_ASCII_TO_ASCII_AMOUNT_CHAR_MAP = {\n '０': '0',\n '１': '1',\n '２': '2',\n '３': '3',\n '４': '4',\n '５': '5',\n '６': '6',\n '７': '7',\n '８': '8',\n '９': '9',\n '．': '.',\n '。': '.',\n '｡': '.',\n '，': ',',\n '、': ',',\n '､': ',',\n}\n\n/*\n * Convert any non-ASCII input in amount input string to the\n * ASCII counterpart (e.g. for Japananese fullwidth characters)\n *\n * @param {string} input\n * @returns {string} input with any non-ASCII digits/decimals\n * converted to their ASCII counterparts\n */\nexport function normalizeAmountInput(input) {\n if (typeof input !== 'string') {\n return input\n }\n\n return input.replace(\n new RegExp(\n `[${Object.keys(NON_ASCII_TO_ASCII_AMOUNT_CHAR_MAP).join('')}]`,\n 'g'\n ),\n char => NON_ASCII_TO_ASCII_AMOUNT_CHAR_MAP[char]\n )\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport AutosizeInput from 'react-input-autosize'\n\nimport { formatMoney, validateFormat } from 'client/griffin'\nimport { normalizeAmountInput } from 'client/lib/amount'\n\nconst MAX_SIZE = 8\n\nfunction dupeZeroes(numZeroes) {\n return new Array(Math.max(0, numZeroes + 1)).join('0')\n}\n\nclass CurrencyTextBoxRegular extends React.Component {\n static propTypes = {\n currencyCode: PropTypes.string,\n onChange: PropTypes.func,\n onBlur: PropTypes.func,\n decimalDigits: PropTypes.number,\n decimalDot: PropTypes.string,\n value: PropTypes.number,\n autoResize: PropTypes.bool,\n showCurrency: PropTypes.bool, // TODO: rename this to showCurrencySymbol.\n removeTrailingZeros: PropTypes.bool,\n focusOnMount: PropTypes.number,\n decimalDotInRegex: PropTypes.string,\n showIntlCurrencyCode: PropTypes.bool,\n minAmount: PropTypes.number,\n }\n\n static defaultProps = {\n value: 0,\n autoResize: false,\n removeTrailingZeros: false,\n showCurrency: true,\n showIntlCurrencyCode: true,\n }\n\n constructor(props) {\n super(props)\n const majorDigits = MAX_SIZE - props.decimalDigits // no. of digits to left of dot (integer part)\n const minorDigits = props.decimalDigits // no. of digits to right of dot (fractional part)\n let minorPart = ''\n const decimalDotInRegex = '[\\\\.,]'\n if (minorDigits > 0) {\n minorPart = `(${decimalDotInRegex}\\\\d{0,${minorDigits}})?`\n }\n this.state = {\n decimalDot: props.decimalDot,\n allowedInputRegex: new RegExp(\n `^(([1-9]\\\\d{0,${majorDigits - 1}})|0)?${minorPart}$`\n ),\n zeroFractionalString: props.decimalDot + dupeZeroes(minorDigits),\n value: props.value || '', // Note: this deliberately includes the case where value === ''.\n unformattedValue: '',\n minAmount: Number.isInteger(props.minAmount) ? props.minAmount : 1,\n }\n }\n\n UNSAFE_componentWillReceiveProps = ({ value }) => {\n const inputElement = this.getInputElement()\n if (value !== this.props.value && document.activeElement !== inputElement) {\n this.setState({ value }, () => {\n this.formatValueWithGriffin()\n })\n }\n }\n\n getInputElement = () => {\n let inputElement = this.inputElement\n if (this.props.autoResize && inputElement.getInput) {\n inputElement = inputElement.getInput()\n }\n return inputElement\n }\n\n getAmountVal = () => {\n let value = normalizeAmountInput(this.getInputElement().value)\n if (value === this.state.decimalDot) {\n value = `0${this.state.decimalDot}`\n }\n return value\n }\n\n isInputEmpty = () => {\n const amountVal = this.getAmountVal()\n return amountVal == null || amountVal === ''\n }\n\n isInputValid = value => {\n return (\n this.isInputEmpty() ||\n (this.state.allowedInputRegex.test(this.getAmountVal()) &&\n parseFloat(this.getAmountVal()) >= this.state.minAmount &&\n validateFormat(value))\n )\n }\n\n handleChange = event => {\n const value = normalizeAmountInput(event.target.value)\n if (!this.isInputValid(value)) {\n // this.showInvalid() - shake it, baby\n return\n }\n this.setState({ value })\n if (value === '') {\n this.props.onChange(undefined)\n } else {\n this.props.onChange(parseFloat(value.replace(this.state.decimalDot, '.')))\n }\n }\n\n handleFocus = () => {\n if (!this.getInputElement()) {\n return\n }\n this.restoreUnformattedValue()\n }\n\n formatValueWithGriffin = () => {\n this.setState(prevState => {\n let newValue = ''\n if (prevState.value) {\n const prevValue = prevState.value.toString()\n newValue = formatMoney(\n this.props.currencyCode,\n prevValue.replace(this.props.decimalDot, '.'),\n {\n showCurrencySymbol: this.props.showCurrency,\n hideCurrencyCode: !this.props.showIntlCurrencyCode,\n }\n )\n }\n return {\n value: newValue,\n unformattedValue: prevState.value,\n }\n })\n }\n\n restoreUnformattedValue = () => {\n this.setState(prevState => {\n if (prevState.unformattedValue) {\n return {\n value: prevState.unformattedValue,\n }\n }\n })\n }\n\n handleBlur = () => {\n this.formatValueWithGriffin(this.props.onBlur())\n }\n\n componentDidMount() {\n if (this.props.focusOnMount != null) {\n let inputElement = this.getInputElement()\n setTimeout(() => {\n this.formatValueWithGriffin()\n inputElement.focus()\n }, this.props.focusOnMount)\n }\n }\n\n render() {\n const { ...inputProps } = this.props\n delete inputProps.currencyCode\n delete inputProps.decimalDigits\n delete inputProps.decimalDot\n delete inputProps.autoResize\n delete inputProps.showCurrency\n delete inputProps.removeTrailingZeros\n delete inputProps.focusOnMount\n delete inputProps.showIntlCurrencyCode\n\n inputProps.onChange = this.handleChange\n inputProps.onKeyDown = this.handleChange\n inputProps.onFocus = this.handleFocus\n inputProps.onBlur = this.handleBlur\n inputProps.ref = inputElement => {\n this.inputElement = inputElement\n }\n inputProps.value = this.state.value\n\n if (this.props.autoResize) {\n inputProps.inputClassName = inputProps.className\n delete inputProps.className\n return {this.props.text}
\n )}\n \n
\n )\n }\n}\n\nexport default cssModules(Money, styles)\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Motion, spring } from 'react-motion'\nimport cssModules from 'react-css-modules'\nimport styles from './campaign_info.less'\nimport { getI18n } from 'client/i18n'\nimport {\n formatMoney,\n formatDateShort,\n shouldUseIntlFormat,\n} from 'client/griffin'\nimport RoundedProgress from 'components/common/rounded_progress'\nimport Separator from 'components/common/separator'\nimport Delay from 'components/common/delay'\nimport Money from 'components/common/money'\nimport { DAYS_THRESHOLD } from 'shared/shared_consts'\n\nconst PROGRESS_ANIMATION_DURATION = 250\n\nconst i18n = getI18n('components/chip_in')\n\nclass CampaignInfo extends React.Component {\n static propTypes = {\n currentValue: PropTypes.number,\n currency: PropTypes.string,\n daysPassed: PropTypes.number,\n daysRemaining: PropTypes.number,\n goal: PropTypes.number,\n contributionsCount: PropTypes.number,\n canChipIn: PropTypes.bool.isRequired,\n endDate: PropTypes.instanceOf(Date),\n preview: PropTypes.bool,\n shareProgress: PropTypes.bool,\n onClick: PropTypes.func,\n compact: PropTypes.bool,\n removeTrailingZeros: PropTypes.bool,\n title: PropTypes.string,\n pledge: PropTypes.number,\n name: PropTypes.string,\n }\n\n static defaultProps = {\n removeTrailingZeros: true,\n }\n\n getHistoryString = (daysPassed, contributionsCount) => {\n let historyKey\n if (daysPassed != null) {\n historyKey = 'age_only_{days}'\n }\n\n return historyKey\n ? i18n(historyKey, {\n days: daysPassed,\n contributions: contributionsCount,\n })\n : ''\n }\n\n render() {\n const { removeTrailingZeros, compact, pledge, name } = this.props\n const progressValue = Math.min(this.props.currentValue / this.props.goal, 1)\n const hasGoal = this.props.goal != null && this.props.goal > 0\n const sharingProgress = this.props.shareProgress || compact\n const hasProgress = sharingProgress && this.props.currentValue > 0\n const hasDaysPassed = this.props.daysPassed != null\n const hasContributionsCount = this.props.contributionsCount > 0\n const goalFormatted =\n hasGoal &&\n formatMoney(this.props.currency, this.props.goal, {\n removeTrailingZeros,\n hideCurrencyCode: true,\n })\n const historyString = this.getHistoryString(\n this.props.daysPassed,\n this.props.contributionsCount\n )\n const reached = progressValue >= 1\n const pledgeFormatted =\n pledge &&\n formatMoney(this.props.currency, pledge, { hideCurrencyCode: true })\n const showPledge = sharingProgress && pledge > 0\n\n let daysRemainingElement\n if (this.props.daysRemaining != null) {\n if (this.props.canChipIn) {\n daysRemainingElement = (\n \n \n {currencySymbol}\n \n {this.props.editable ? (\n
\n {this.props.showIntlCurrencyCode &&\n shouldUseIntlFormat(this.props.currency) && (\n {this.props.currency}
\n )}\n \n \n {this.props.daysRemaining > DAYS_THRESHOLD\n ? i18n('ends_on', {\n date: formatDateShort(this.props.endDate),\n })\n : i18n('remaining_{days}', {\n days: this.props.daysRemaining + '',\n })}\n
\n )\n }\n }\n\n if (!sharingProgress && !hasGoal && !daysRemainingElement) {\n return null\n }\n return (\n \n {compact &&\n !this.props.canChipIn && (\n
\n )\n }\n}\n\nexport default cssModules(CampaignInfo, styles, { allowMultiple: true })\n","import CampaignInfo from './campaign_info'\nimport { connect } from 'react-redux'\nimport {\n daysUntilToday,\n daysFromToday,\n daysFromTo,\n} from 'shared/helpers/datetime_helpers'\nimport { getCampaignSelector } from 'redux/selectors/campaign'\n\nconst mapStateToProps = (state, props) => {\n const campaign = getCampaignSelector(state, props)\n\n let daysPassed, daysRemaining\n if (campaign.end_date && new Date(campaign.end_date) < new Date()) {\n daysPassed =\n daysFromTo(new Date(campaign.start_date), new Date(campaign.end_date)) + 1\n } else {\n daysPassed = daysUntilToday(new Date(campaign.start_date)) + 1\n }\n\n if (campaign.end_date) {\n daysRemaining = daysFromToday(new Date(campaign.end_date))\n }\n // checking for daysRemaining just in case that the user's clock is off\n let notExpired = daysRemaining == null || daysRemaining >= 0\n\n return {\n title: campaign.title,\n currentValue: campaign.current_value + campaign.pledge,\n goal: campaign.goal,\n currency: campaign.currency,\n contributionsCount: campaign.preview ? 0 : campaign.txn_count,\n canChipIn: campaign.can_chip_in && notExpired,\n endDate: new Date(campaign.end_date),\n preview: campaign.preview,\n shareProgress: campaign.share_progress,\n pledge: campaign.pledge,\n name: campaign.owner && campaign.owner.first_name,\n daysPassed,\n daysRemaining,\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {}\n}\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(CampaignInfo)\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { getI18n } from 'client/i18n'\nimport cssModules from 'react-css-modules'\nimport Separator from 'components/common/separator'\nimport { Link } from 'react-router'\n\nimport styles from './edit_part.less'\n\nconst i18n = getI18n('components/edit_glimpse/edit_part')\n\nclass EditPart extends React.Component {\n static propTypes = {\n children: PropTypes.any,\n targetLocation: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\n onTargetClick: PropTypes.func,\n editButtonDisplay: PropTypes.oneOf([\n 'hide',\n 'right',\n 'bottom',\n 'bottom-no-margin',\n ]),\n cancelBottomMargin: PropTypes.bool,\n actionText: PropTypes.string,\n disabled: PropTypes.bool,\n editName: PropTypes.string,\n labelName: PropTypes.string,\n }\n\n static defaultProps = {\n showEditButton: true,\n }\n\n render() {\n let containerClass\n switch (this.props.editButtonDisplay) {\n case 'hide':\n containerClass = 'container-no-edit'\n break\n case 'right':\n containerClass = 'container-edit-right'\n break\n case 'right-no-bottom-margin':\n containerClass = 'container-edit-right-no-bottom-margin'\n break\n case 'bottom':\n containerClass = 'container-edit-bottom'\n break\n default:\n containerClass = 'container-edit-right'\n }\n\n let { actionText } = this.props\n if (!actionText) {\n actionText = i18n('edit')\n }\n\n return (\n \n
\n )}\n {compact && {i18n('ended')}
\n {this.props.title}
}\n {hasGoal &&\n reached &&\n compact && {i18n('reached')}
}\n {sharingProgress ? (\n \n {hasGoal ? (\n \n {delayed => (\n \n {value => (\n
\n ) : (\n hasGoal && (\n \n {i18n('goal', { value: goalFormatted })}\n
\n ) : (\n {i18n('collected')}
\n )}\n \n {i18n('just_goal', { value: goalFormatted })}\n
\n )\n )}\n {(hasGoal || hasProgress) &&\n shouldUseIntlFormat(this.props.currency) && (\n {this.props.currency}
\n )}\n\n {!compact &&\n hasProgress &&\n (hasDaysPassed || hasContributionsCount) && (\n \n {historyString}\n
\n )}\n {showPledge && (\n \n {i18n('pledged' + (compact ? '' : '_name'), {\n amount: pledgeFormatted,\n name,\n })}\n
\n )}\n {((!compact && daysRemainingElement) ||\n (compact && showPledge && !hasContributionsCount)) && (\n \n
\n )\n }\n}\n\nexport default cssModules(EditPart, styles)\n","// NOTE: when `maxRows` is 1, this component is buggy in FireFox and always shows \"Show More\".\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport cssModules from 'react-css-modules'\nimport styles from './expandable_paragraph.less'\nimport Separator from 'components/common/separator'\nimport { getI18n } from 'client/i18n'\nimport { BodyText } from '@paypalcorp/pp-react'\n\nconst TEXT_LINE_HEIGHT = 1.6\nconst LIGHT_TEXT_LINE_HEIGHT = 1.5\nconst TEXT_FONT_SIZE = 15\nconst LIGHT_TEXT_FONT_SIZE = 13\nconst i18n = getI18n('components/expandable_paragraph')\n\nclass ExpandableParagraph extends React.Component {\n static propTypes = {\n titleText: PropTypes.string,\n children: PropTypes.node,\n maxRows: PropTypes.number,\n lightText: PropTypes.bool,\n lightLink: PropTypes.bool,\n }\n\n static defaultProps = { maxRows: 3 }\n state = { open: false }\n\n updateHeight = () => {\n this.setState({ height: this.detailsText.scrollHeight })\n }\n\n componentDidMount() {\n this.updateHeight()\n window.addEventListener('resize', this.handleResize)\n }\n\n componentWillUnmount() {\n window.removeEventListener('resize', this.handleResize)\n }\n\n handleResize = () => {\n this.updateHeight()\n }\n\n onShowMore = () => {\n this.setState({ open: !this.state.open })\n }\n\n render() {\n // these are hard-coded and not derived from the CSS since the manual height set after mounting is counting on `scrollHeight`\n // which will only be set if this is hard-coded here.\n const lineHeight = this.props.lightText\n ? LIGHT_TEXT_LINE_HEIGHT\n : TEXT_LINE_HEIGHT // in em\n const fontSize = this.props.lightText\n ? LIGHT_TEXT_FONT_SIZE\n : TEXT_FONT_SIZE // in px\n\n let detailsClass = ''\n let buttonText = ''\n let detailsStyle = {}\n let detailsTextStyle = { lineHeight, fontSize }\n let showMoreButton = false\n if (this.state.height) {\n if (this.state.height > this.props.maxRows * lineHeight * fontSize) {\n showMoreButton = true\n // overflow\n detailsClass = this.state.open ? 'details-open' : 'details'\n buttonText = this.state.open ? i18n('show_less') : i18n('show_more')\n\n detailsStyle = this.state.open\n ? { height: this.state.height + 'px' }\n : { height: `${this.props.maxRows * lineHeight * fontSize}px` }\n\n detailsTextStyle = Object.assign(\n this.state.open ? {} : { WebkitLineClamp: this.props.maxRows },\n detailsTextStyle\n )\n } else {\n // no overflow\n detailsClass = 'details-open'\n }\n }\n\n return (\n \n
\n {this.props.children}
\n {this.props.editButtonDisplay !== 'hide' && (\n \n {this.props.targetLocation ? (\n \n {actionText}\n \n ) : (\n \n {actionText}\n \n )}\n
\n )}\n \n {this.props.titleText && (\n \n {this.props.titleText} \n
\n {showMoreButton && (\n \n {\n this.detailsText = detailsText\n }}\n style={detailsTextStyle}\n >\n {this.props.children} \n
\n {title}
\n {maxRows ? (\n {value}
\n )}\n {this.props.description && (\n {this.props.description}
\n )}\n \n
\n )\n }\n}\n\nexport default cssModules(Alert, styles)\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport cssModules from 'react-css-modules'\nimport styles from './no_currency_alert.less'\nimport { getI18n } from 'client/i18n'\nimport Alert from 'components/common/alert'\n\nconst i18n = getI18n('components/no_currency_alert')\n\nclass NoCurrencyAlert extends React.Component {\n static propTypes = {\n currency: PropTypes.string,\n paypalDomain: PropTypes.string,\n }\n\n render() {\n const currency = this.props.currency\n const currencyUrl = `https://${\n this.props.paypalDomain\n }/il/cgi-bin/webscr?cmd=_profile-currencies`\n\n return (\n {this.props.children}
\n\n {!hasCurrencyBalance && (\n
\n )\n }\n}\n\nexport default withRouter(cssModules(Manage, styles))\n","import Manage from './manage'\nimport { connect } from 'react-redux'\nimport { getCampaignSelector } from 'redux/selectors/campaign'\nimport {\n contributorsMapSelector,\n pendingContributionsListSelector,\n} from 'redux/selectors/contributions'\nimport { push } from 'react-router-redux'\nimport { glimpseRoute } from 'lib/route_utils'\n\nconst mapStateToProps = (state, props) => {\n const campaign = getCampaignSelector(state, props)\n const contributors = contributorsMapSelector(state, props)\n const pendingContributors = pendingContributionsListSelector(state, props)\n // We take the withdraw amount off the moneybox immediately, so we don't need to count it in the pending amount.\n const pendingAmount =\n pendingContributors.reduce((sum, txn) => {\n return txn.withdraw ? sum : sum + txn.amount * 100\n }, 0) / 100\n\n return {\n title: campaign.title,\n hasChippedIn: campaign.current_value > 0,\n moneyboxAmount: campaign.moneybox_amount,\n hasMoneybox: campaign.moneybox_amount > 0,\n currencyCode: campaign.currency,\n contributorsCount: Object.keys(contributors).length,\n hasCurrencyBalance: campaign.has_currency_balance,\n pendingAmount,\n paypalDomain: state.geo.paypalDomain,\n }\n}\n\nconst mapDispatchToProps = (dispatch, { campaignId }) => {\n return {\n onTransfer() {\n dispatch(push({ pathname: glimpseRoute('edit', 'transfer') }))\n },\n }\n}\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(Manage)\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport cssModules from 'react-css-modules'\nimport IconCircle from 'components/common/icon_circle'\nimport styles from './flat_progress.less'\nimport { formatPercent, formatMoney } from 'client/griffin'\nimport { ProgressMeter, HeadingText } from '@paypalcorp/pp-react'\nimport { getI18n } from 'client/i18n'\n\nconst i18n = getI18n('components/common/flat_progress')\n\nclass FlatProgress extends React.Component {\n static propTypes = {\n currencyCode: PropTypes.string,\n totalAmount: PropTypes.number,\n goalAmount: PropTypes.value,\n showPercentage: PropTypes.bool,\n showProgress: PropTypes.bool,\n compact: PropTypes.bool,\n }\n\n static defaultProps = {\n showPercentage: true,\n showProgress: true,\n }\n\n render() {\n const percentage = formatPercent(\n this.props.totalAmount / this.props.goalAmount\n )\n\n return (\n \n {hasChippedIn && (\n \n {i18n('edit_pool')}\n \n {hasChippedIn && (\n \n {i18n('transfer_link')}\n \n )}\n
\n \n
\n )}\n \n
\n )\n }\n}\n\nexport default cssModules(FlatProgress, styles, { allowMultiple: true })\n","import React from 'react'\nimport { PropTypes } from 'prop-types'\nimport { connect } from 'react-redux'\nimport { Toast } from '@paypalcorp/pp-react'\nimport { hide } from 'redux/modules/toast_notification'\n\nclass ToastContainer extends React.Component {\n static propTypes = {\n dispatch: PropTypes.func,\n message: PropTypes.node,\n duration: PropTypes.number,\n visible: PropTypes.object,\n delayTime: PropTypes.number,\n id: PropTypes.string,\n isSuccess: PropTypes.bool,\n }\n\n state = {\n show:\n this.props.visible[this.props.id] && this.props.delayTime ? false : true,\n }\n\n handleClose = () => {\n const { dispatch, id } = this.props\n dispatch(hide(id))\n }\n\n componentDidMount() {\n const { delayTime } = this.props\n if (delayTime) {\n setTimeout(() => this.setState({ show: true }), delayTime)\n }\n }\n\n render() {\n const { duration = 7000, id, isSuccess, message } = this.props\n return this.state.show ? (\n \n \n {formatMoney(this.props.currencyCode, this.props.totalAmount)}\n \n
\n {this.props.showProgress ? (\n \n
\n )\n )}\n {this.props.showPercentage && this.props.showProgress ? (\n \n
\n \n {percentage}\n \n {i18n('raised_amount_goal', {\n amount: formatMoney(\n this.props.currencyCode,\n this.props.goalAmount\n ),\n })}\n \n
\n ) : (\n ''\n )}\n \n {i18n('donations')} \n\n
\n )\n }\n}\n\nexport default cssModules(campaign_balance, styles)\n","import CampaignBalance from './campaign_balance'\nimport { connect } from 'react-redux'\nimport { getCampaignSelector } from 'redux/selectors/campaign'\n\nconst mapStateToProps = (state, props) => {\n const campaign = getCampaignSelector(state, props)\n\n return {\n pledge: campaign.pledge,\n currencyCode: campaign.currency,\n withdraw: campaign.current_value - campaign.moneybox_amount,\n moneyboxAmount: campaign.moneybox_amount,\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {}\n}\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(CampaignBalance)\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'\nimport cssModules from 'react-css-modules'\nimport styles from './reveal.less'\n\nconst DURATION = 300\n\nclass RevealTransition extends React.Component {\n static propTypes = {\n children: PropTypes.any,\n }\n\n render() {\n const transitionNames = {\n enter: styles['reveal-enter'],\n enterActive: styles['reveal-enter-active'],\n leave: styles['reveal-leave'],\n leaveActive: styles['reveal-leave-active'],\n }\n\n return (\n \n
\n \n
\n \n {i18n('available')} \n
\n \n {formatMoney(currencyCode, moneyboxAmount, {\n removeTrailingZeros,\n })}\n
\n \n
\n \n {i18n('pledge_by')} \n
\n \n {formatMoney(currencyCode, pledge, {\n removeTrailingZeros,\n })}\n
\n \n {this.props.title} {`(${this.props.contributions.length})`}\n
\n )}\n \n {formatDate(element.date, 'MMMd')}\n
\n )\n } else {\n return this.props.rowElement(element, element.id)\n }\n })}\n {this.props.bottomElement}\n {this.canShowMore() && (\n <>\n \n \n {i18n('show_more_action')}\n \n
\n \n )}\n \n {noAvatarElement}\n
\n )\n }\n}\n\nexport default cssModules(Avatar, styles, { allowMultiple: true })\n","import Avatar from './avatar'\nimport { connect } from 'react-redux'\n\nimport { getInitials } from 'shared/helpers/name_helpers'\nimport { getCampaignSelector } from 'redux/selectors/campaign'\n\nconst mapStateToProps = (state, props) => {\n const campaign = getCampaignSelector(state, props)\n const campaignOwner = campaign.owner\n const initials = props.showInitials\n ? getInitials(campaignOwner.full_name)\n : null\n\n return {\n imageUrl: campaignOwner.profile_photo,\n initials,\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {}\n}\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(Avatar)\n","// taken from here: http://stackoverflow.com/questions/40958727/javascript-generate-unique-number-based-on-string\nexport function getHash(input) {\n let hash = 0,\n len = input.length\n for (let i = 0; i < len; i++) {\n hash = (hash << 5) - hash + input.charCodeAt(i) // eslint-disable-line no-bitwise\n hash |= 0 // eslint-disable-line no-bitwise\n }\n return hash\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { UnboundAvatar, avatarColors } from 'components/common/avatar'\nimport ExpandableParagraph from 'components/common/expandable_paragraph'\nimport cssModules from 'react-css-modules'\nimport styles from './activity_row.less'\nimport { getI18n } from 'client/i18n'\nimport { formatMoney } from 'client/griffin'\nimport { getHash } from 'shared/helpers/string_helpers'\nimport { getInitials } from 'shared/helpers/name_helpers'\nimport { MIN_ACTIVITY_ROW_HEIGHT } from '../../../../shared/shared_consts'\nimport { Divider } from '@paypalcorp/pp-react'\n\nconst i18n = getI18n('components/txn_row')\n\nclass ActivityRow extends React.Component {\n static propTypes = {\n id: PropTypes.string,\n note: PropTypes.string,\n amount: PropTypes.number,\n currency: PropTypes.string,\n contributor_id: PropTypes.string,\n contributor_name: PropTypes.string,\n contributor_photo: PropTypes.string,\n pending: PropTypes.bool,\n withdraw: PropTypes.bool,\n net_amount: PropTypes.number,\n }\n\n getAvatarBackgroundColor = () => {\n if (this.props.withdraw) return 'blue'\n if (!this.props.contributor_id) return 'white'\n const uniqueNumericId = getHash(this.props.contributor_id.toString())\n return avatarColors[uniqueNumericId % avatarColors.length]\n }\n\n render() {\n const amountStyleName = this.props.withdraw ? 'amount' : 'amount-positive'\n const amountSign = this.props.withdraw ? '-' : '+'\n const subjectName = this.props.withdraw\n ? i18n('txn_row.paypal_balance')\n : this.props.contributor_name\n const activityType = this.props.withdraw\n ? i18n('txn_row.transfer')\n : i18n('txn_row.contribution')\n const avatarIcon = this.props.withdraw ? 'money-out' : undefined\n\n return (\n \n \n {this.props.note}\n \n )}\n
\n \n
\n \n \n {subjectName}\n
\n {activityType}
\n {this.props.note && (\n \n {amountSign}\n {formatMoney(this.props.currency, this.props.net_amount)}\n
\n \n {i18n('crowdfunding_activity.title')} \n
\n )\n }\n}\n\nexport default cssModules(CrowdfundingActivity, styles, {\n allowMultiple: true,\n})\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport cssModules from 'react-css-modules'\nimport styles from './crowdfunding_campaign_header.less'\nimport {\n Col,\n Icon,\n Row,\n HeadingText,\n CaptionText,\n Avatar,\n} from '@paypalcorp/pp-react'\nimport { getI18n } from 'client/i18n'\nimport { daysFromToday } from 'shared/helpers/datetime_helpers'\n\nconst i18n = getI18n('components/crowdfunding_campaign_header')\n\nclass CrowdFundingCampaignHeader extends React.Component {\n static propTypes = {\n poolName: PropTypes.string.isRequired,\n categoryName: PropTypes.string.isRequired,\n creatorName: PropTypes.string.isRequired,\n profileImage: PropTypes.string.isRequired,\n initials: PropTypes.string.isRequired,\n end_date: PropTypes.string,\n charity: PropTypes.object,\n showDaysRemaining: PropTypes.bool,\n }\n\n getCharityNameComponent(charity) {\n return (\n \n (\n {\n this.handleFPTI(activityItem.credit_txn_id)\n }}\n >\n
\n \n (\n {\n this.handleFPTI(activityItem.credit_txn_id)\n }}\n >\n
\n \n {!hasCurrencyBalance && (\n
\n )\n }\n}\n\nexport default withRouter(cssModules(Manage, styles))\n","import Manage from './manage_cf'\nimport { connect } from 'react-redux'\nimport { getCampaignSelector, isGNSelector } from 'redux/selectors/campaign'\nimport { push } from 'react-router-redux'\nimport { glimpseRoute } from 'lib/route_utils'\nimport { createDNWTransaction } from 'client/redux/modules/dnw_transaction'\nimport {\n CROWDFUNDING_GOAL_AMOUNT,\n TOAST_NOTIFICATIONS,\n} from 'shared/shared_consts'\n\nconst mapStateToProps = (state, props) => {\n const campaign = getCampaignSelector(state, props)\n const canChipInAndCanDonate = campaign.can_chip_in && campaign.can_donate\n const canDonateGNC =\n Boolean(campaign.charity) &&\n canChipInAndCanDonate &&\n Boolean(campaign.is_owner) &&\n state.flags.dnw_payment\n let isGoalAmountLessThanFundraiserLimit = true\n\n if (isGNSelector(state, props)) {\n const { MAX_AMOUNT } = CROWDFUNDING_GOAL_AMOUNT[campaign.country_code]\n isGoalAmountLessThanFundraiserLimit = campaign.current_value < MAX_AMOUNT\n }\n\n return {\n canChipIn: campaign.can_chip_in,\n canDonateGNC: canDonateGNC,\n charity: campaign.charity,\n currencyCode: campaign.currency,\n currentValue: campaign.current_value + campaign.pledge,\n goal: campaign.goal,\n hasChippedIn: campaign.current_value > 0,\n hasCurrencyBalance: campaign.has_currency_balance,\n hasMoneybox: campaign.moneybox_amount > 0,\n isGoalAmountLessThanFundraiserLimit: isGoalAmountLessThanFundraiserLimit,\n isDNWPayment: state.flags.dnw_payment,\n showUpdateSuccess:\n state.toast_notification[TOAST_NOTIFICATIONS.EDIT_SUCCESS],\n paypalDomain: state.geo.paypalDomain,\n }\n}\n\nconst mapDispatchToProps = (dispatch, { campaignId }) => {\n return {\n onTransfer() {\n dispatch(push({ pathname: glimpseRoute('edit', 'transfer') }))\n },\n onDonate(id) {\n dispatch(\n createDNWTransaction({\n campaignId: id,\n hasFullPageDonationRedirect: true,\n })\n )\n },\n }\n}\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(Manage)\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport cssModules from 'react-css-modules'\nimport { getI18n } from 'client/i18n'\nimport { formatMoney } from 'client/griffin'\nimport styles from './activity.less'\nimport {\n CompletedActivityList,\n PendingContributionsList,\n} from 'components/contributions_list/owner_activity_list'\nimport ActivityRow from 'components/contributions_list/rows/activity_row'\nimport { withRouter } from 'react-router'\nimport { connect } from 'react-redux'\nimport { getCampaignSelector } from 'redux/selectors/campaign'\n\nconst i18n = getI18n('components/edit_glimpse/activity')\n\nclass Activity extends React.Component {\n static propTypes = {\n campaignId: PropTypes.string,\n moneyBoxAmount: PropTypes.number,\n moneyBoxCurrency: PropTypes.string,\n }\n\n render() {\n const balance = formatMoney(\n this.props.moneyBoxCurrency,\n this.props.moneyBoxAmount\n )\n\n return (\n \n \n {hasChippedIn &&\n !isCharity && (\n {\n if (e.key === ENTER_KEY) {\n this.handleTransferClick()\n }\n }}\n styleName=\"manage-link\"\n tabIndex={0}\n >\n \n {i18n('transfer_link')}\n \n \n )}\n \n \n {i18n('edit_fundraiser')}\n \n \n {canChipIn &&\n isGoalAmountLessThanFundraiserLimit &&\n !isCharity && (\n \n \n {i18n('pledge')}\n \n \n )}\n {canDonateGNC && (\n \n \n {i18n('donate')}\n \n \n )}\n {\n if (e.key === ENTER_KEY) {\n this.exitManage()\n }\n }}\n tabIndex={0}\n >\n \n {i18n('show_fundraiser')}\n \n \n \n \n {i18n('share')}\n \n \n
\n
\n\n {!isCharity && \n
\n\n \n
\n )\n }\n}\n\nexport default connect((state, ownProps) => {\n const campaign = getCampaignSelector(state, ownProps)\n return {\n moneyBoxAmount: campaign.moneybox_amount,\n moneyBoxCurrency: campaign.currency,\n }\n})(withRouter(cssModules(Activity, styles)))\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport cssModules from 'react-css-modules'\nimport { Link } from 'react-router'\n\nimport styles from './empty_edit_part.less'\n\nimport EditPart from 'components/edit_part'\n\nclass StandardEditPart extends React.Component {\n static propTypes = {\n title: PropTypes.string,\n description: PropTypes.string,\n subText: PropTypes.string,\n buttonTitle: PropTypes.string,\n targetLocation: PropTypes.string,\n onClick: PropTypes.func,\n editName: PropTypes.string,\n }\n\n handleClick = e => {\n if (this.props.onClick) {\n e.preventDefault()\n this.props.onClick()\n }\n }\n\n render() {\n return (\n {i18n('activity.title')}
\n {i18n('activity.balance', { balance })}
\n \n (\n
\n \n (\n
\n {this.props.title}
\n {this.props.description}
\n {this.props.subText && (\n {this.props.subText}
\n )}\n \n {this.props.showHeader && (\n
\n )\n }\n\n return (\n \n {i18n('cover')}\n \n {i18n('change_cover')}\n \n
\n )}\n \n
\n {i18n('add_cover')}
\n \n )\n }\n}\n\nexport default cssModules(Cover, styles)\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport cssModules from 'react-css-modules'\nimport { Link } from 'react-router'\nimport { getI18n } from 'client/i18n'\nimport EditPart from 'components/edit_part'\nimport StandardEditPart from 'components/standard_edit_part'\nimport EmptyEditPart from 'components/empty_edit_part'\nimport Cover from 'components/cover'\nimport styles from './edit_main.less'\nimport { glimpseRoute } from 'lib/route_utils'\nimport { formatMoney, formatDateShort } from 'client/griffin'\n\nconst MAX_DESCRIPTION_ROWS = 5\nconst i18n = getI18n('components/edit_glimpse/edit_main')\n\nclass EditMain extends React.Component {\n static propTypes = {\n title: PropTypes.string,\n backgroundImage: PropTypes.string,\n gradientColor: PropTypes.string,\n backgroundPan: PropTypes.number,\n goal: PropTypes.number,\n endDate: PropTypes.instanceOf(Date),\n ended: PropTypes.bool,\n description: PropTypes.string,\n contribPrefs: PropTypes.string,\n tracking: PropTypes.string,\n currency: PropTypes.string,\n showDelete: PropTypes.bool,\n location: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\n onReopen: PropTypes.func,\n isAndroid: PropTypes.bool,\n categoryName: PropTypes.string,\n category: PropTypes.string,\n postalCode: PropTypes.string,\n }\n\n render() {\n const editRoute = glimpseRoute.bind(undefined, 'edit')\n const goalFormatted =\n this.props.goal &&\n formatMoney(this.props.currency, this.props.goal, {\n removeTrailingZeros: true,\n })\n\n return (\n \n {this.props.ended && (\n \n \n \n {i18n('delete')}\n \n )}\n
\n )\n }\n}\n\nexport default cssModules(EditMain, styles)\n","import { getI18n } from 'client/i18n'\nimport { AMOUNT_TYPES } from 'shared/shared_consts'\nimport EditMain from './edit_main'\nimport { connect } from 'react-redux'\nimport { formatMoney } from 'client/griffin'\nimport { show as showComingSoon } from 'redux/modules/coming_soon_dialog'\nimport { getCampaignSelector } from 'redux/selectors/campaign'\nimport { getCategoryLabel } from 'lib/category'\n\nconst i18n = getI18n('components/edit_glimpse/edit_main')\n\nfunction stringifyContributionPrefs(campaign) {\n switch (campaign.amount_type) {\n case AMOUNT_TYPES.any:\n return i18n('any')\n case AMOUNT_TYPES.at_least:\n return i18n('at_least', {\n amount: formatMoney(campaign.currency, campaign.amount),\n })\n case AMOUNT_TYPES.exactly:\n return i18n('exactly', {\n amount: formatMoney(campaign.currency, campaign.amount),\n })\n default:\n return 'UNKNOWN'\n }\n}\n\nfunction stringifyPublicTrackingPrefs(campaign) {\n let octal =\n (campaign.share_progress ? 1 : 0) +\n (campaign.share_contributors ? 2 : 0) +\n (campaign.share_progress && campaign.share_contributions ? 4 : 0)\n\n return i18n('tracking_prefs_' + octal)\n}\n\nconst mapStateToProps = (state, props) => {\n const campaign = getCampaignSelector(state, props)\n return {\n title: campaign.title,\n backgroundImage: campaign.background_image,\n gradientColor: campaign.gradient_color,\n backgroundPan: campaign.background_pan,\n goal: campaign.goal ? campaign.goal : undefined,\n endDate: campaign.end_date ? new Date(campaign.end_date) : undefined,\n ended: !campaign.can_chip_in,\n description: campaign.description,\n contribPrefs: stringifyContributionPrefs(campaign),\n tracking: stringifyPublicTrackingPrefs(campaign),\n currency: campaign.currency,\n showDelete: !campaign.preview,\n categoryName: getCategoryLabel(state, campaign.category),\n postalCode: campaign.postal_code,\n isAndroid:\n state.device_info.isMobile && state.device_info.deviceOS === 'Android',\n category: campaign.category,\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n onReopen() {\n dispatch(showComingSoon())\n },\n }\n}\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(EditMain)\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Tile, CaptionText } from '@paypalcorp/pp-react'\nimport cssModules from 'react-css-modules'\nimport styles from './charity_card.less'\n\nclass CharityCard extends React.Component {\n static propTypes = {\n charity: PropTypes.object,\n }\n render() {\n const { charity } = this.props\n return (\n \n {i18n('ended', {\n endDate: formatDateShort(this.props.endDate),\n })}\n
\n )}\n\n {this.props.title}
\n \n\n {!this.props.isAndroid && (\n {i18n('goal_cover')}
\n \n {charity.name} \n
\n \n {errors.length > 1 && (\n
\n )\n }\n}\n\nexport default cssModules(InputError, styles, { allowMultiple: true })\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport cssModules from 'react-css-modules'\nimport MaskedInput from 'react-text-mask'\nimport { getCurrencySymbol } from 'client/griffin'\n\nimport styles from './text_box.less'\nimport AutosizeTextarea from 'react-textarea-autosize'\nimport CurrencyTextBox from 'components/common/currency_text_box'\nimport InputError from 'components/common/input_error'\nimport { getJSONFromScript } from 'lib/server_params'\n\nimport ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'\n\n/*\n\tA Note on TextBoxes in Pools\n\t~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n\tThere are three kinds of textboxes:\n\t1. Native/low-level TextBoxes, which require a behavior that fundamentally changes the\n\t way that textboxes behave. These include the regular , - \n {errors.map((e, i) => (\n
- \n {e}\n \n ))}\n