{"version":3,"sources":["shared/components/ProfilePhoto/index.js","components/PersonalizedBanner/utils.js","components/PersonalizedBanner/PersonalizedBanner.js","components/LanguageToggle/query.gql.js","components/LanguageToggle/hooks.js","shared/components/ProfilePhoto/styles.css","components/LanguageToggle/index.js","shared/components/Link/index.js","shared/components/Link/styles.css"],"names":["ProfilePhoto","render","width","this","props","className","styles","style","borderRadius","backgroundImage","src","height","minWidth","data-testid","Component","getLogoutContent","isOneTouched","isUdtImplicit","isSmsOtped","isSkipFacebook","getContent","getBannerContent","user","givenName","get","getUser","firstName","bannerContent","mapPersonalizedBannerContentFromProps","isActiveSession","params","ulReturn","getIsRememberedAuthState","getClaims","includes","getIsUserOneTouchLogin","getIsUserSkipFacebookLogin","getIsUserDeviceTokenImplicitLogin","profilePhotoUrl","logoutContext","handleLogout","action","logger","fpti","REVIEW_PAYLOAD","cal","info","redirectToLogout","logoutContent","PersonalizedBanner","allQueryData","data","Container","BannerContent","Link","LogoutButton","onClick","LanguageToggle","LANGUAGE_TOGGLE_QUERY","useLanguageToggle","useQuery","variables","countryCode","getCountry","language","locale","supportedLanguages","localeMetadata","shouldShowLanguageToggle","module","exports","lazyComponent","id","LanguageToggleContainer","enabled","useFeature","LanguageToggleGate","useEligibilityContext","showRemittanceDisclosure","tag","href","newProps","tabIndex","cx","link","type","React","createElement","children"],"mappings":"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","file":"js/PersonalizedBanner~21833f8f.295ac8d4.js","sourcesContent":["import React, { Component } from 'react';\nimport styles from './styles.css';\n\nclass ProfilePhoto extends Component {\n  render() {\n    let width = this.props.width || 40;\n\n    return (\n      <div\n        className={styles.ProfilePhoto}\n        style={{\n          borderRadius: `${width}px`,\n          backgroundImage: `url(\"${this.props.src}\")`,\n          width: width,\n          height: width,\n          minWidth: width,\n        }}\n        data-testid=\"profile-photo\"\n      />\n    );\n  }\n}\n\nexport default ProfilePhoto;\n","import { getClaims, getUser } from '@paypalcorp/c3-shared-globals';\nimport { params } from '@paypalcorp/c3-util-browser';\nimport get from 'dlv';\nimport { logger, REVIEW_PAYLOAD } from '@paypalcorp/c3-util-logger';\nimport getContent from '@/lib/content';\nimport { redirectToLogout } from '@/lib/redirects';\nimport {\n  getIsRememberedAuthState,\n  getIsUserDeviceTokenImplicitLogin,\n  getIsUserOneTouchLogin,\n  getIsUserSkipFacebookLogin,\n} from '@/authStates';\n\n/**\n * Checking if current logged user is via one time password via SMS or not by ensuring:\n *  auth_state: `REMEMBERED`\n *  auth_claims: `OTP_SMS`\n * @returns {Boolean}\n */\nexport const getIsUserSmsOtpLogin = () => {\n  return getIsRememberedAuthState() && getClaims().includes('OTP_SMS');\n};\n\n/**\n * @param {Object} obj\n * @param {Boolean} obj.isOneTouched | Current user is OT (one touch) login\n * @param {Boolean} obj.isUdtImplicit | Current user is UDT login\n * @param {Boolean} obj.isSmsOtped | Current user is SMS OTP login\n * @returns {String} Returns the content string for rendering logging out button.\n *  One touch -> \"Not you?\"\n *  UDT Implicit -> \"Not you?\"\n *  SMSOpt -> \"Not you?\"\n * Everything else will render `Log out` as the content (which includes active session use case)\n */\nconst getLogoutContent = ({\n  isOneTouched = false,\n  isUdtImplicit = false,\n  isSmsOtped = false,\n  isSkipFacebook = false,\n} = {}) => {\n  return isOneTouched || isUdtImplicit || isSmsOtped || isSkipFacebook\n    ? getContent('login.notYou')\n    : getContent('login.logOut');\n};\n\n// TODO: refactor later\nconst getBannerContent = ({ user, isOneTouched = false, isSkipFacebook = false } = {}) => {\n  const givenName = get(user, 'name.givenName', getUser().firstName);\n\n  // Default banner content = Hi {givenName}!\n  // OneTouch banner content adds a OneTouch message\n  // SMS OTP login, UDT login are other forms of \"remembered\" login with no custom content\n  let bannerContent = getContent('login.hi', { givenName });\n  if (isOneTouched) {\n    // NOTE: only when `isOneTouchLogin` is true, we display the `one touch` welcoming message\n    bannerContent += ` ${getContent('login.loggedWithOneTouch')}`;\n  } else if (isSkipFacebook) {\n    bannerContent += ` ${getContent('login.loggedWithFacebook')}`;\n  }\n\n  return bannerContent;\n};\n\n// TODO: refactor later\nexport function mapPersonalizedBannerContentFromProps(user = {}) {\n  // when ulReturn is a query param, it means that there is a new login. When it isn't present\n  // it means it is an already active session.\n  const isActiveSession = !params().ulReturn;\n  const isSmsOtped = getIsUserSmsOtpLogin();\n  const isOneTouched = getIsUserOneTouchLogin();\n  const isSkipFacebook = getIsUserSkipFacebookLogin();\n  const isUdtImplicit = getIsUserDeviceTokenImplicitLogin();\n\n  return {\n    bannerContent: getBannerContent({ user, isOneTouched, isSkipFacebook }),\n    profilePhotoUrl: get(user, 'profileImage.url.href'),\n    logoutContext:\n      isSmsOtped || isOneTouched || isUdtImplicit || isSkipFacebook || isActiveSession\n        ? {\n            handleLogout: () => {\n              const action =\n                isOneTouched || isUdtImplicit || isSmsOtped || isSkipFacebook ? 'notyou' : 'logout';\n              logger.fpti(action, REVIEW_PAYLOAD({ action }));\n\n              // log UDT implicit and SMS OTP\n              isUdtImplicit && logger.cal.info('UDT_NOT_YOU');\n              isSmsOtped && logger.cal.info('SMS_OPTED_NOT_YOU');\n              isSkipFacebook && logger.cal.info('SKIP_FACEBOOK');\n\n              redirectToLogout(action);\n            },\n            logoutContent: getLogoutContent({\n              isOneTouched,\n              isUdtImplicit,\n              isSmsOtped,\n              isSkipFacebook,\n            }),\n          }\n        : null,\n  };\n}\n","import React from 'react';\nimport Link from '@/shared/components/Link';\nimport ProfilePhoto from '@/shared/components/ProfilePhoto';\nimport LanguageToggle from '../LanguageToggle';\nimport { mapPersonalizedBannerContentFromProps } from './utils';\nimport styles from './styles.css';\n\n// Wrap the component with GraphQL component to sync showing the loading component\n// while waiting for both GraphQL query and async import of component to complete\nconst PersonalizedBanner = ({ allQueryData: [{ data: { user = {} } = {} }] }) => {\n  const { bannerContent, profilePhotoUrl, logoutContext } = mapPersonalizedBannerContentFromProps(\n    user\n  );\n\n  return (\n    <div className={styles.Container} data-testid=\"personalized-banner\">\n      {profilePhotoUrl && <ProfilePhoto src={profilePhotoUrl} />}\n      {bannerContent && (\n        <span data-testid=\"personalized-banner-content\" className={styles.BannerContent}>\n          {bannerContent}\n        </span>\n      )}\n      {logoutContext && (\n        <Link\n          data-testid=\"personalized-banner-logout-btn\"\n          className={styles.LogoutButton}\n          onClick={logoutContext.handleLogout}\n        >\n          {logoutContext.logoutContent}\n        </Link>\n      )}\n      <LanguageToggle />\n    </div>\n  );\n};\n\nexport default PersonalizedBanner;\n","import gql from 'graphql-tag';\n\nexport const LANGUAGE_TOGGLE_QUERY = gql`\n  query LanguageToggleQuery($countryCode: CountryCodes!) {\n    user {\n      locale {\n        language\n      }\n    }\n    localeMetadata {\n      supportedLanguages(countryCode: $countryCode)\n    }\n  }\n`;","import { useQuery } from '@apollo/react-hooks';\nimport { getToken, getCountry } from '@paypalcorp/c3-shared-globals';\nimport { LANGUAGE_TOGGLE_QUERY } from './query.gql';\nimport { useEligibilityContext } from '@/components/ContextProviders';\n\nexport function useLanguageToggle() {\n  const { data } = useQuery(LANGUAGE_TOGGLE_QUERY, {\n    variables: { \n      countryCode: getCountry()\n    },\n  });\n  const language = data?.user?.locale?.language ?? null;\n  const supportedLanguages = data?.localeMetadata?.supportedLanguages ?? [];\n  const shouldShowLanguageToggle = supportedLanguages.includes(language) && language !== 'en';\n\n  return {\n    language,\n    shouldShowLanguageToggle,\n    supportedLanguages\n  }\n}","// extracted by extract-css-chunks-webpack-plugin\nmodule.exports = {\"ProfilePhoto\":\"ProfilePhoto_ProfilePhoto_gxsvZ\",\"profilePhoto\":\"ProfilePhoto_ProfilePhoto_gxsvZ\"};","import React, { useEffect, useState } from 'react';\nimport { useFeature } from '../Feature/hooks';\nimport { lazyComponent } from '@/lib/lazyLoad';\nimport { useLanguageToggle } from './hooks';\nimport { useEligibilityContext } from '@/components/ContextProviders';\n/**\n * Note - The Language toggle query will only fire after it is determined that the showRemittanceDisclosure flag is true\n *\n *  @description `Language Toggle` component is a link toggle that appears only when the flow is Invoice, the buyer is from 'US', \n * the merchant is a non US country, showRemittanceDisclosure flag is true, and the buyer's default language is not English.\n *\n *  @summary On click of the language toggle, the app will reload in English. Subsequent toggles will reload app in user's default language\n */\nconst LanguageToggle = lazyComponent(() => import('./LanguageToggle'), {\n  id: 'LANGUAGE_TOGGLE',\n});\n\n function LanguageToggleContainer() {\n  const { enabled } = useFeature('LANGUAGE_TOGGLE');\n  const { shouldShowLanguageToggle } = useLanguageToggle();\n\n  if (enabled && shouldShowLanguageToggle) {\n    return <LanguageToggle />\n  }\n  return null;\n}\n\nexport default function LanguageToggleGate() {\n  const eligibilityContext = useEligibilityContext();\n  const { showRemittanceDisclosure = false } = eligibilityContext;\n  return showRemittanceDisclosure && <LanguageToggleContainer />\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport cx from 'classnames';\nimport styles from './styles.css';\n\nexport default function Link(props) {\n  const tag = props.href ? 'a' : 'button';\n  let newProps = props;\n\n  if (tag === 'button') {\n    newProps = {\n      ...props,\n      tabIndex: 0,\n      className: cx(styles.link, props.className),\n      type: 'button',\n    };\n  }\n\n  return React.createElement(tag, newProps, props.children);\n}\n\nLink.propTypes = {\n  href: PropTypes.string,\n  className: PropTypes.string,\n};\n","// extracted by extract-css-chunks-webpack-plugin\nmodule.exports = {\"ppui-color-blue-600\":\"#0070ba\",\"ppuiColorBlue600\":\"#0070ba\",\"ppui-color-blue-800\":\"#003087\",\"ppuiColorBlue800\":\"#003087\",\"link\":\"Link_link_12w0g\"};"],"sourceRoot":""}