{"version":3,"sources":["webpack:////home/jenkins/agent/workspace/rAlWnROk32481EutLuZS/lib/inline-icons/silhouette.svg","webpack:///./transfer/components/new-contact-thumbnail.js"],"names":["module","exports","i18n","content","SilhouetteIcon","glamorousIcon","gradients","sizes","main","diameter","modern","mini","generateGradientFromFirstInitial","firstInitial","remainder","charCodeAt","Silhouette","_ref","diameterProp","preset","size","React","createElement","glamorous","Div","width","height","margin","transform","svg","silhouetteSVG","Initials","_ref2","lastInitial","fontSize","P","color","position","top","ProfileImage","props","backgroundSize","backgroundPosition","backgroundImage","concat","thumbnailUrl","Wrapper","div","borderRadius","overflow","boxShadow","textAlign","_ref3","showGradient","ContactThumbnail","_ref4","className","permissions","showProfileImage","includes","hasProfilePhoto","showInitials","canUseInitials","showSilhouette","defaultProps","connect","_ref5","server"],"mappings":"6EAAAA,EAAOC,QAAU,6vB,iCCAjB,wEAsBMC,EAAOC,YAAQ,yBAEfC,EAAiBC,cAEjBC,EAAY,CAChB,4CACA,4CAEA,4CACA,4CAEA,2CACA,2CAEA,4CACA,4CAEA,2CACA,4CAGIC,EAAQ,CACZC,KAAM,CACJC,SAAU,IAEZC,OAAQ,CACND,SAAU,IAEZE,KAAM,CACJF,SAAU,KASP,SAASG,EAAiCC,GAC/C,IAAKA,EACH,OAAOP,EAAU,GAGnB,IAAMQ,EAAYD,EAAaE,WAAW,GAAK,GAC/C,OAAOT,EAAUQ,IAAcR,EAAU,GAe3C,SAASU,EAAUC,GAAqC,IAAlCR,SAAUS,EAAY,OAAEC,GAAQF,EAE9CG,EAAkB,KADPF,GAAgBX,EAAMY,GAAQV,UAE/C,OACEY,IAAAC,cAACC,IAAUC,IAAG,CACZC,MAAOL,EACPM,OAAQN,EACRO,OAAO,kBACPC,UAAU,oBAEVP,IAAAC,cAAClB,EAAc,CAACyB,IAAKC,OAY3B,SAASC,EAAQC,GAKd,IALe,aAChBnB,EAAY,YACZoB,EAAW,OACXd,EACAV,SAAUS,GACXc,EAEOE,EAAsB,IADXhB,GAAgBX,EAAMY,GAAQV,UAE/C,OACEY,IAAAC,cAACC,IAAUY,EAAC,CACVC,MAAM,QACNC,SAAS,WACTV,OAAO,IACPW,IAAI,MACJV,UAAU,mBACVM,SAAUA,GAEThC,EAAK,qBAAsB,CAC1BW,eACAoB,iBAYD,SAASM,EAAaC,GAC3B,OACEnB,IAAAC,cAACC,IAAUC,IAAG,CACZE,OAAO,OACPD,MAAM,OACNgB,eAAe,QACfC,mBAAmB,SACnBC,gBAAe,QAAAC,OAAUJ,EAAMK,aAAY,QAQjD,IAAMC,EAAUvB,IAAUwB,IACxB,CACEV,SAAU,WACVW,aAAc,MACdC,SAAU,SACVC,UAAW,wCACXC,UAAW,SACXV,eAAgB,SAElBW,IAAA,IAAC,SAAE3C,EAAQ,OAAEU,EAAM,aAAEkC,EAAY,aAAExC,GAAcuC,EAAA,MAAM,CACrD3B,MAAOhB,GAAYF,EAAMY,GAAQV,SACjCiB,OAAQjB,GAAYF,EAAMY,GAAQV,SAClCkC,gBAAiBU,EACbzC,EAAiCC,GACjC,MAID,SAASyC,EAAgBC,GAQ7B,IAR8B,UAC/BC,EAAS,aACTX,EAAe,GAAE,OACjB1B,EAAM,SACNV,EAAQ,aACRI,EAAY,YACZoB,EAAW,YACXwB,EAAc,IACfF,EACOG,EAvGD,SAAyBb,GAC9B,QAASA,IAAiBA,EAAac,SAAS,YAsGvBC,CAAgBf,GACnCQ,GAAgBK,EAChBG,GACHH,GACDD,EAAYK,gBACZjD,GACAoB,EACI8B,GAAkBL,IAAqBG,EAC7C,OACExC,IAAAC,cAACwB,EAAO,CACNO,aAAcA,EACdxC,aAAcA,EACdM,OAAQA,EACRV,SAAUA,EACV+C,UAAWA,GAEVE,GAAoBrC,IAAAC,cAACiB,EAAY,CAACM,aAAcA,IAChDgB,GACCxC,IAAAC,cAACS,EAAQ,CACPlB,aAAcA,EACdoB,YAAaA,EACbd,OAAQA,EACRV,SAAUA,IAGbsD,GAAkB1C,IAAAC,cAACN,EAAU,CAACP,SAAUA,EAAUU,OAAQA,KAgBjEmC,EAAiBU,aAAe,CAC9BR,UAAW,GACXX,aAAc,GACdY,YAAa,GACbtC,OAAQ,QAGK8C,gBAAQC,IAAA,IAAC,OAAEC,GAAQD,EAAA,MAAM,CACtCT,YAAaU,EAAOV,cADPQ,CAEXX","file":"default~edit-contacts~guest~multi-recipient-redux~recipient-redux~reveal~universal-preview.esm.js","sourcesContent":["module.exports = \"<svg version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" x=\\\"0px\\\" y=\\\"0px\\\" viewBox=\\\"0 0 23 22\\\" style=\\\"enable-background:new 0 0 23 22;\\\" xml:space=\\\"preserve\\\"><style type=\\\"text/css\\\"> .silhouette-svg{fill:#FFFFFF;} </style><path id=\\\"profile-mini\\\" class=\\\"silhouette-svg\\\" d=\\\"M22.2,21.3H1.1c-0.3,0-0.5-0.2-0.5-0.5c0-3.7,2.3-6.4,6.7-7.9c0.3-0.1,0.5,0,0.6,0.3 c0.1,0.3,0,0.5-0.3,0.6c-3.8,1.3-5.9,3.5-6.1,6.5h20c-0.4-5.6-7.2-7.1-10.2-7.5C7.8,12.5,5.3,10,5.3,6.6c0-3.5,2.8-6.3,6.3-6.3 c3.5,0,6.3,2.8,6.3,6.3c0,2.2-1.2,4.3-3.1,5.4c-0.2,0.1-0.5,0.1-0.7-0.2c-0.1-0.2-0.1-0.5,0.2-0.7c1.6-0.9,2.6-2.7,2.6-4.6 c0-2.9-2.4-5.3-5.3-5.3S6.3,3.7,6.3,6.6c0,2.9,2,4.9,5.2,5.3c3.4,0.4,11.1,2.2,11.1,8.9C22.7,21.1,22.4,21.3,22.2,21.3\\\"></path></svg>\"","/**\n * A new contact thumbnail component that will replace the legacy contact-thumbnail component as we continue to refactor recipients and contact UI.\n *\n * Usage:\n * The goal of refactoring this was primarily to make the component more useful without requiring classNames (prev lots of dupe)\n * - by default it uses the prop preset='main' for styling, so in most cases you shouldn't have to pass any styling to the component\n * - you can pass positioning related styling (margin: '0 auto', etc.) as className if you need to (avoid changing width/height with className)\n * - if you need a diameter other than the presets, you can change width you can pass diameter=30 (e.g.) and fonts etc. will adjust proportionally\n *\n * Other Features:\n * - PayPal gradients behind initials\n * - Updated silhouette\n * - Fades the profile photo on load, instead of gross scanning\n */\n\nimport { connect } from 'transfer/utils/p2p-connect'\nimport PropTypes from 'prop-types'\nimport React from 'react'\nimport content from 'pp-react-l10n'\nimport silhouetteSVG from '../../../../lib/inline-icons/silhouette.svg'\nimport glamorousIcon from '../../lib/glamorous-icon'\nimport glamorous from 'glamorous'\nconst i18n = content('transfer/page/preview')\n\nconst SilhouetteIcon = glamorousIcon()\n\nconst gradients = [\n  'linear-gradient(-25deg, #00CF92, #009CDE)',\n  'linear-gradient(-25deg, #00CF92, #009CDE)',\n\n  'linear-gradient(100deg, #FF9600, #DE0063)',\n  'linear-gradient(100deg, #FF9600, #DE0063)',\n\n  'linear-gradient(10deg, #009CDE, #003087)',\n  'linear-gradient(10deg, #009CDE, #003087)',\n\n  'linear-gradient(100deg, #640487, #003087)',\n  'linear-gradient(100deg, #640487, #003087)',\n\n  'linear-gradient(10deg, #DE0063, #640487)',\n  'linear-gradient(10deg, #DE0063, #640487)',\n]\n\nconst sizes = {\n  main: {\n    diameter: 96,\n  },\n  modern: {\n    diameter: 79,\n  },\n  mini: {\n    diameter: 50,\n  },\n}\n\n/**\n * Function used to deterministically produce the same index from a first initial.\n * Used so background gradients are the same between component renders, and user sessions.\n * The math could probably be more eloquent...\n */\nexport function generateGradientFromFirstInitial(firstInitial) {\n  if (!firstInitial) {\n    return gradients[0]\n  }\n  // e.g. charCode = 27; 27 % 10 = 7 i.e. remainder will ALWAYS be between 0 and 9\n  const remainder = firstInitial.charCodeAt(0) % 10\n  return gradients[remainder] || gradients[0]\n}\n\n/**\n * PayPal services always return some string for profile photos, even if it's a url to a blank image.\n * This is helper to determine if there is actually a photo to show.\n */\nexport function hasProfilePhoto(thumbnailUrl) {\n  return !!thumbnailUrl && !thumbnailUrl.includes('&d=blank')\n}\n\n/**\n * If the contact doesn't already have a thumbnail or initials, render a generic user silhouette thumbnail\n * NOTE: this was copied from an older component — we should replace with newer sillhouette soon.\n * */\nfunction Silhouette({ diameter: diameterProp, preset }) {\n  const diameter = diameterProp || sizes[preset].diameter\n  const size = diameter * 0.55 // size of silhouette looks good when it's 55% of diameter\n  return (\n    <glamorous.Div\n      width={size}\n      height={size}\n      margin=\"50% auto 0 auto\"\n      transform=\"translateY(-50%)\"\n    >\n      <SilhouetteIcon svg={silhouetteSVG} />\n    </glamorous.Div>\n  )\n}\nSilhouette.propTypes = {\n  diameter: PropTypes.number,\n  preset: PropTypes.string,\n}\n\n/**\n * Includes initials for names that support it, with a gradient background\n */\nfunction Initials({\n  firstInitial,\n  lastInitial,\n  preset,\n  diameter: diameterProp,\n}) {\n  const diameter = diameterProp || sizes[preset].diameter\n  const fontSize = diameter * 0.3 // font looks good when it's 30% of the diameter\n  return (\n    <glamorous.P\n      color=\"white\"\n      position=\"relative\"\n      margin=\"0\"\n      top=\"50%\"\n      transform=\"translateY(-50%)\"\n      fontSize={fontSize}\n    >\n      {i18n('recipient.initials', {\n        firstInitial,\n        lastInitial,\n      })}\n    </glamorous.P>\n  )\n}\nInitials.propTypes = {\n  firstInitial: PropTypes.string,\n  lastInitial: PropTypes.string,\n  preset: PropTypes.string,\n  diameter: PropTypes.number,\n}\n\nexport function ProfileImage(props) {\n  return (\n    <glamorous.Div\n      height=\"100%\"\n      width=\"100%\"\n      backgroundSize=\"cover\"\n      backgroundPosition=\"center\"\n      backgroundImage={`url('${props.thumbnailUrl}')`}\n    />\n  )\n}\nProfileImage.propTypes = {\n  thumbnailUrl: PropTypes.string,\n}\n\nconst Wrapper = glamorous.div(\n  {\n    position: 'relative',\n    borderRadius: '50%',\n    overflow: 'hidden',\n    boxShadow: '1px 3px 8px rgba(199, 199, 199, 0.50)',\n    textAlign: 'center',\n    backgroundSize: 'cover',\n  },\n  ({ diameter, preset, showGradient, firstInitial }) => ({\n    width: diameter || sizes[preset].diameter,\n    height: diameter || sizes[preset].diameter,\n    backgroundImage: showGradient\n      ? generateGradientFromFirstInitial(firstInitial)\n      : '',\n  })\n)\n\nexport function ContactThumbnail({\n  className,\n  thumbnailUrl = '',\n  preset,\n  diameter,\n  firstInitial,\n  lastInitial,\n  permissions = {},\n}) {\n  const showProfileImage = hasProfilePhoto(thumbnailUrl)\n  const showGradient = !showProfileImage\n  const showInitials =\n    !showProfileImage &&\n    permissions.canUseInitials &&\n    firstInitial &&\n    lastInitial\n  const showSilhouette = !showProfileImage && !showInitials\n  return (\n    <Wrapper\n      showGradient={showGradient}\n      firstInitial={firstInitial}\n      preset={preset}\n      diameter={diameter}\n      className={className}\n    >\n      {showProfileImage && <ProfileImage thumbnailUrl={thumbnailUrl} />}\n      {showInitials && (\n        <Initials\n          firstInitial={firstInitial}\n          lastInitial={lastInitial}\n          preset={preset}\n          diameter={diameter}\n        />\n      )}\n      {showSilhouette && <Silhouette diameter={diameter} preset={preset} />}\n    </Wrapper>\n  )\n}\n\nContactThumbnail.propTypes = {\n  preset: PropTypes.oneOf(['main', 'modern', 'mini']), // main is normal, modern is simple header, mini is like autocomplete sized\n  diameter: PropTypes.number,\n  className: PropTypes.string,\n  // :) resist adding other className overrides for things like font color, background color, in general all contact thumbnails should look/work the same\n  thumbnailUrl: PropTypes.string.isRequired,\n  firstInitial: PropTypes.string,\n  lastInitial: PropTypes.string,\n  permissions: PropTypes.object.isRequired,\n}\n\nContactThumbnail.defaultProps = {\n  className: '',\n  thumbnailUrl: '',\n  permissions: {},\n  preset: 'main',\n}\n\nexport default connect(({ server }) => ({\n  permissions: server.permissions,\n}))(ContactThumbnail)\n"],"sourceRoot":""}