{"version":3,"sources":["webpack:///./transfer/components/bill-splitting.styles.js","webpack:///./transfer/components/selectedRecipients.js"],"names":["colors","slider","width","height","content","left","position","boxSizing","transform","transition","StyleSheet","create","displayName","marginBottom","marginTop","textAlign","truncate","overflow","overflowWrap","inputClasses","componentWrapper","display","alignItems","padding","minHeight","oddBackgroundColor","backgroundColor","inputs","borderStyle","media","successBox","requester","fontWeight","lineHeight","requesterWrapper","margin","inputWrapper","previewAmountWrapper","background","border","concat","requesterInput","recipientComponentWrapper","maxWidth","inputAndContactsWrapper","headerWidth","nextButton","dim","opacity","inputIcon","color","inputLock","fontSize","top","hide","smallDevice","logo","verticalAlign","marginLeft","marginRight","backgroundSize","backgroundRepeat","recipientPartnerPadding","recipientPartnerHeaderPadding","recipientPartnerWidth","center","partnerPadding","redirectMargin","btnContainer","rightRequestTab","borderBottom","transformOrigin","leftRequestTab","tabs","outline","borderRadius","noBorder","inlineWrapper","note","noteContainer","checkboxSpanLabel","textIndent","paddingLeft","button","cursor","addAnotherEntry","addAnotherContainer","multiPreview","paddingBottom","columns","centerDisplayName","confirmEmail","currencyRestricted","submitButton","submitButtonDisabled","boxShadow","textDecoration","sysColorUnselectedMainActive","sysColorSelectedRangeMain","sysColorSelectedRangeContrast","_PAYPAL_THEME","DisplayName","React","Component","render","fullName","companyName","alternateFullName","recipient","this","props","trim","nameSplit","split","firstNameInitials","charAt","lastName","length","createElement","_BodyText","as","style","_defineProperty","RecipientPill","glamorous","div","userSelect","_ref","isSelected","isSuccess","overrides","flexBasis","minWidth","ContactAvatarContainer","SelectedRecipient","constructor","arguments","event","preventDefault","stopPropagation","handleRecipientSelection","index","firstName","firstInitial","lastInitial","thumbnailUrl","role","tabIndex","key","onClick","onSelect","onKeyUp","keyCode","dir","selected","isPreviewing","ContactAvatar","size","imageUrl","isBusiness","Boolean","getAvatarColor","_objectSpread","whiteSpace","textOverflow","SelectedRecipients","_extends","id","selectedRecipientIndex","shouldComponentUpdate","nextProps","nextState","recipients","ReactFlipMove","map","renderSelectedRecipient"],"mappings":"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","file":"default~multi-recipient-redux~request-page~request-preview~request-success.esm.js","sourcesContent":["import { StyleSheet } from 'lib/paypalphrodite'\nimport * as media from '../../lib/styles/media-queries'\n\nconst colors = {\n  boxShadowGray: '#e6e4e4',\n  grayBackground: '#f7f9fa',\n  grayBorder: '#f2f2f2',\n  sliderGray: '#d8d8d8',\n  vxSecondaryLightGray: '#b7bcbf',\n  gray: '#dedede',\n  white: '#ffffff',\n  black: '#000000',\n  sliderBlue: '#0070ba',\n  cardStroke: '#F5F7FA',\n  checkBox: '#0092d1',\n}\n\nconst slider = {\n  width: '100%',\n  height: '100%',\n  content: 'close-quote',\n  left: 0,\n  position: 'absolute',\n  boxSizing: 'border-box',\n  transform: 'scaleX(0)',\n  transition: '0.5s',\n}\n\nexport default StyleSheet.create({\n  displayName: {\n    marginBottom: 0,\n    marginTop: 0,\n    textAlign: 'left',\n  },\n  truncate: {\n    overflow: 'hidden',\n    overflowWrap: 'break-word',\n  },\n  inputClasses: {\n    textAlign: 'right',\n  },\n  componentWrapper: {\n    display: 'flex',\n    alignItems: 'center',\n    padding: '15px',\n    marginBottom: '16px',\n    minHeight: 100,\n  },\n  oddBackgroundColor: {\n    backgroundColor: colors.grayBackground,\n  },\n  inputs: {\n    borderStyle: 'none',\n    textAlign: 'right',\n    [media.smallAndBigger]: {\n      width: '140px',\n    },\n    [media.smallAndSmaller]: {\n      width: '100px',\n    },\n  },\n  successBox: {\n    padding: '3.5em 0 0',\n    [media.smallAndSmaller]: {\n      marginTop: '3em',\n    },\n  },\n  requester: {\n    fontWeight: 'bold',\n    height: 38,\n    [media.smallAndBigger]: {\n      lineHeight: '38px',\n    },\n  },\n  requesterWrapper: {\n    [media.smallAndBigger]: {\n      padding: 28,\n    },\n    margin: 5,\n  },\n  inputWrapper: {\n    margin: '14px 0',\n  },\n  previewAmountWrapper: {\n    background: colors.white,\n    border: `1px solid ${colors.grayBorder}`,\n    marginBottom: '1em',\n    width: '100%',\n    textAlign: 'center',\n  },\n  requesterInput: {\n    border: 'none',\n    textAlign: 'right',\n    height: 48,\n    padding: '0 12px',\n  },\n  recipientComponentWrapper: {\n    maxWidth: 684,\n    margin: '0 auto 40px',\n    position: 'relative',\n  },\n  inputAndContactsWrapper: {\n    maxWidth: 600,\n    margin: 'auto',\n  },\n  headerWidth: {\n    maxWidth: 600,\n  },\n  backgroundColor: {\n    backgroundColor: 'white',\n  },\n  nextButton: {\n    marginTop: '1em',\n  },\n  dim: {\n    opacity: '0.4',\n  },\n  inputIcon: {\n    position: 'absolute',\n    color: colors.vxSecondaryLightGray,\n  },\n  inputLock: {\n    fontSize: 20,\n    top: 24, // should be half the input height\n  },\n  hide: {\n    display: 'none',\n  },\n  smallDevice: {\n    [media.smallAndSmaller]: {\n      display: 'none',\n    },\n  },\n  logo: {\n    verticalAlign: 'center',\n    marginLeft: 5,\n    marginRight: 5,\n    display: 'inline-block', // NOSONAR\n    width: 30,\n    height: 30,\n    backgroundSize: 30,\n    backgroundRepeat: 'no-repeat',\n  },\n  recipientPartnerPadding: {\n    padding: '0 24px',\n    fontSize: '30px',\n  },\n  recipientPartnerHeaderPadding: {\n    padding: '32px 24px 16px',\n  },\n  recipientPartnerWidth: {\n    maxWidth: '486px',\n  },\n  center: {\n    margin: '0 auto',\n  },\n  partnerPadding: {\n    padding: 24,\n  },\n  redirectMargin: {\n    marginTop: 0,\n  },\n  btnContainer: {\n    margin: '0 auto',\n    maxWidth: 500,\n  },\n  slider: {\n    color: colors.sliderBlue,\n    ':after': { transform: 'scaleX(1)' },\n    ':before': { transform: 'scaleX(1)' },\n  },\n  rightRequestTab: {\n    ':before': {\n      borderBottom: `3px solid ${colors.sliderBlue}`,\n      transformOrigin: '0% 100%',\n    },\n    ':after': { transformOrigin: '50% 50%' },\n  },\n  leftRequestTab: {\n    ':before': {\n      borderBottom: `3px solid ${colors.sliderBlue}`,\n      transformOrigin: '100% 100%',\n    },\n    ':after': { transformOrigin: '50% 50%' },\n  },\n  tabs: {\n    outline: 'none',\n    backgroundColor: 'transparent',\n    position: 'relative',\n    border: 'none',\n    borderBottom: `1px solid ${colors.sliderGray}`,\n    borderRadius: 0,\n    height: '60px',\n    lineHeight: '60px',\n    textAlign: 'center',\n    transition: '0.5s',\n    color: colors.black,\n    ':before': slider,\n    ':after': slider,\n  },\n  noBorder: { border: 'none' },\n  inlineWrapper: {\n    width: '100%',\n    display: 'inline-block',\n  },\n  note: {\n    margin: '30px 0',\n    backgroundColor: colors.white,\n  },\n  noteContainer: {\n    margin: '1em 1.5em 3em',\n  },\n  checkboxSpanLabel: {\n    top: '-50%',\n    textIndent: 'initial',\n    position: 'absolute',\n    width: '100%',\n    [media.smallAndBigger]: {\n      paddingLeft: 25,\n    },\n  },\n  button: {\n    padding: '0 20px',\n    cursor: 'pointer',\n  },\n  addAnotherEntry: {\n    outline: 'none',\n    backgroundColor: 'transparent',\n    position: 'relative',\n    border: 'none',\n    borderRadius: 0,\n    height: '60px',\n    lineHeight: '60px',\n    textAlign: 'center',\n    transition: '0.5s',\n    color: colors.sliderBlue,\n    margin: 5,\n    padding: '0 20px',\n  },\n  addAnotherContainer: {\n    margin: '0 10px',\n  },\n  multiPreview: {\n    marginTop: '1em',\n    marginBottom: 0,\n    paddingBottom: 0,\n  },\n  columns: {\n    [media.smallAndBigger]: {\n      columns: '1',\n    },\n  },\n  centerDisplayName: {\n    [media.smallAndBigger]: {\n      position: 'absolute',\n      top: '45%',\n      left: '25%',\n      transform: 'translateY(-50%)',\n    },\n  },\n  confirmEmail: {\n    maxWidth: '500px',\n    margin: '32px auto',\n    backgroundColor: colors.white,\n  },\n  currencyRestricted: {\n    textAlign: 'center',\n    fontWeight: 'bold',\n  },\n  submitButton: {\n    display: 'block',\n    textAlign: 'center',\n    marginLeft: 'auto',\n    marginRight: 'auto',\n  },\n  submitButtonDisabled: {\n    color: '#cbd2d6',\n    background: '#f5f6f8',\n    boxShadow: 'none',\n    border: '1px solid #cbd2d6',\n    textDecoration: 'none',\n    cursor: 'not-allowed',\n    outline: 'none',\n    transform: 'none',\n  },\n})\n","/**\n * Selected Recipient Component, found on the recipient page.\n * It renders a set of contact thumbnails with click handlers.\n */\n\nimport PropTypes from 'prop-types'\n\nimport React from 'react'\nimport ReactFlipMove from 'react-flip-move'\nimport glamorous from 'glamorous'\nimport { BodyText, PAYPAL_THEME } from '@paypalcorp/pp-react'\n\nimport ContactAvatar from 'transfer/components/contactAvatar'\n\nimport { getAvatarColor } from 'lib/avatar'\n\nconst {\n  sysColorUnselectedMainActive,\n  sysColorSelectedRangeMain,\n  sysColorSelectedRangeContrast,\n} = PAYPAL_THEME\n/**\n * The recipient's display name.\n * @example for Dereck Quock = D. Quock\n */\nexport class DisplayName extends React.Component {\n  static propTypes = {\n    recipient: PropTypes.shape({\n      fullName: PropTypes.string,\n      companyName: PropTypes.string,\n      alternateFullName: PropTypes.string,\n      recipient: PropTypes.string.isRequired,\n    }),\n    style: PropTypes.object,\n  }\n\n  static defaultProps = {\n    style: {},\n  }\n\n  render() {\n    const {\n      fullName = '',\n      companyName = '',\n      alternateFullName = '',\n      recipient = '',\n    } = this.props.recipient\n\n    let displayName = alternateFullName || companyName || recipient || ''\n\n    // the fullName is the contact's full name ordered correctly by i18n\n    // from the fullName, use a regex to only get the first name to get the first initial\n    if (fullName.trim()) {\n      // convert the name into array\n      const nameSplit = fullName && fullName.split(' ')\n      // extract the first element from the array (firstName)\n      const firstName = nameSplit[0]\n      // read only the first char in the element\n      let firstNameInitials = firstName.charAt(0)\n      // extract the last element from the array (last name)\n      const lastName = nameSplit[nameSplit && nameSplit.length - 1]\n      // check if first initial exist\n      // if it does, return firstInitial with dot else return empty string\n      firstNameInitials = firstNameInitials ? `${firstNameInitials}.` : ''\n      // join the firstName initial and last name to a string\n      // trim if firstInitial is empty remove the empty space\n      displayName = `${firstNameInitials} ${lastName}`.trim()\n    }\n\n    return (\n      <BodyText as=\"span\" style={this.props.style}>\n        {displayName}\n      </BodyText>\n    )\n  }\n}\n\nconst RecipientPill = glamorous.div(\n  {\n    backgroundColor: sysColorUnselectedMainActive,\n    margin: '0.3125rem 0.3125rem 0 0',\n    padding: '0.25rem 0.625rem 0.25rem 0.25rem',\n    cursor: 'pointer',\n    border: 'none',\n    borderRadius: '99px',\n    maxWidth: '280px',\n    userSelect: 'none',\n    display: 'flex',\n    alignItems: 'center',\n  },\n  ({ isSelected, isSuccess }) => {\n    const overrides = {}\n    if (isSuccess) {\n      overrides.cursor = 'initial'\n      overrides.backgroundColor = 'white'\n      overrides.marginRight = 0\n      overrides.flexBasis = '50%'\n      overrides.minWidth = 0\n    }\n    if (isSelected) {\n      overrides.backgroundColor = sysColorSelectedRangeMain\n    }\n    return overrides\n  }\n)\nconst ContactAvatarContainer = glamorous.div({\n  display: 'inline-block',\n  marginRight: '0.375rem',\n})\n\n/**\n * Selected recipient pill that shows the contact thumbnail and display name.\n */\nexport class SelectedRecipient extends React.Component {\n  static propTypes = {\n    recipient: PropTypes.shape({\n      firstName: PropTypes.string,\n      lastName: PropTypes.string,\n      alternateFullName: PropTypes.string,\n      firstInitial: PropTypes.string,\n      lastInitial: PropTypes.string,\n      thumbnailUrl: PropTypes.string,\n      recipient: PropTypes.string.isRequired,\n    }),\n    handleRecipientSelection: PropTypes.func, // Event handler for selecting a recipient\n    index: PropTypes.number, // Selected contact index to pass to event handler for select\n    selected: PropTypes.bool, // If this selected recipient is focused\n    isPreviewing: PropTypes.bool, // If we are in the preview or success page\n  }\n\n  static defaultProps = {\n    handleRecipientSelection: (recipient, index) => {},\n  }\n\n  onSelect = event => {\n    event.preventDefault()\n    event.stopPropagation()\n\n    this.props.handleRecipientSelection(this.props.recipient, this.props.index)\n\n    return false\n  }\n\n  render() {\n    const {\n      firstName,\n      lastName,\n      alternateFullName,\n      firstInitial = '',\n      lastInitial = '',\n      thumbnailUrl = '',\n      recipient = '',\n    } = this.props.recipient\n\n    return (\n      <RecipientPill\n        role=\"button\"\n        tabIndex=\"0\"\n        key={recipient}\n        onClick={this.onSelect}\n        onKeyUp={event => {\n          if (event.keyCode === 32) {\n            // if it's the space key\n            this.onSelect(event)\n          }\n        }}\n        dir=\"ltr\"\n        isSelected={this.props.selected}\n        isSuccess={this.props.isPreviewing}\n      >\n        <ContactAvatarContainer>\n          <ContactAvatar\n            size={this.props.isPreviewing ? 'sm' : 'xs'}\n            imageUrl={thumbnailUrl}\n            firstInitial={firstInitial}\n            lastInitial={lastInitial}\n            isBusiness={Boolean(alternateFullName)}\n            color={getAvatarColor({ firstName, lastName })}\n          />\n        </ContactAvatarContainer>\n        <DisplayName\n          style={{\n            whiteSpace: 'nowrap',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            ...(this.props.selected && {\n              color: sysColorSelectedRangeContrast,\n            }),\n          }}\n          recipient={this.props.recipient}\n        />\n      </RecipientPill>\n    )\n  }\n}\n\n/**\n * Renders selected recipient pills.\n */\nclass SelectedRecipients extends React.Component {\n  static propTypes = {\n    recipients: PropTypes.array.isRequired, // Selected recipients array to render\n    handleRecipientSelection: PropTypes.func.isRequired, // Event handler for selecting a recipient\n    selectedRecipientIndex: PropTypes.number.isRequired, // The index of the focused selected recipient\n  }\n\n  /**\n   * Renders a {@link SelectedRecipient} for each selected recipient object.\n   */\n  renderSelectedRecipient = (recipient, index) => {\n    return (\n      <SelectedRecipient\n        {...this.props}\n        key={recipient.id || recipient.recipient}\n        recipient={recipient}\n        index={index}\n        selected={index === this.props.selectedRecipientIndex}\n      />\n    )\n  }\n\n  shouldComponentUpdate(nextProps, nextState) {\n    // Only update and render if recipients or focused selected recipient changes.\n\n    return (\n      nextProps.recipients.length !== this.props.recipients.length ||\n      nextProps.selectedRecipientIndex !== this.props.selectedRecipientIndex\n    )\n  }\n\n  render() {\n    return (\n      <ReactFlipMove>\n        {this.props.recipients.map(this.renderSelectedRecipient)}\n      </ReactFlipMove>\n    )\n  }\n}\n\nexport default SelectedRecipients\n"],"sourceRoot":""}