{"version":3,"sources":["webpack:///./src/ui/Plans.js","webpack:///./src/util/CustomRedirect.js","webpack:///./src/components/Miscellaneous/Toggler.js","webpack:///./src/ui/Card.js","webpack:///./src/ui/PlanCard.js","webpack:///./src/modules/Plans.js","webpack:///./src/pages/index.js","webpack:///./src/components/PlanCard/RateInfo.js","webpack:///./src/components/PlanCard/SubscribeButton.js","webpack:///./src/components/PlanCard/PlanTermSelect.js","webpack:///./src/components/PlanCard/index.js","webpack:///./src/ui/RateInfo.js"],"names":["PlanList","styled","div","attrs","className","CardContainer","CustomRedirect","when","to","children","isExternalURL","window","location","noThrow","Toggler","justify","t","useTranslation","usePlan","termIsYearly","setTermIsYearly","classNames","role","type","id","data-testid","onClick","Card","Header","h4","Body","Footer","highlightStyle","PlanCard","props","noHover","css","TermDropdownToggle","DropdownToggle","LinkButton","button","Plans","plans","useState","showPlanComparison","setShowPlanComparison","setOpenPlanFeatures","percentSavings","useYearlySavings","renderCardContainer","x","key","plan","displayComparisonChart","useEffect","handleResize","addEventListener","removeEventListener","style","zIndex","right","left","bottom","backgroundColor","i18nKey","percent","map","p","i","cards","navigate","IndexPage","bmoUser","useUser","resetSession","useResetSession","isSubscriber","zuoraInfo","subscriptions","length","title","PageHeader","PriceHandler","rate","showDisplayPrice","selectedCurrency","useLocale","subscriptionCurrency","getSubscriptionCurrency","price","formatCurrency","withLabel","trim","parseInt","TermHandler","isYearly","isNaN","isMonthly","termName","myPlan","staticRatePlan","hasStaticRatePlanPrice","SubscribeButton","ssoUser","isCommunityUser","subscriptionInfo","isPersonalUser","planType","toLowerCase","isProfessionalUser","isDistrictUser","getMyPlan","setSelectedPlan","setSelectedRate","trialLength","canTrial","isTrialEligible","getRatePlanByType","ratePlans","find","rp","UncontrolledDropdown","color","caret","disabled","DropdownMenu","DropdownItem","console","log","planSelectRoutes","loggedIn","loggedOut","actionText","hasTrial","filter","ratePlan","isTrial","trial","state","extension","span","PlanTermSelect","data-toggle","name","checked","readOnly","htmlFor","hideLearnMoreLink","community","organization","personalOrProfessional","currentRate","shortDescription","RateInfo","disclaimerKey","LightBold","RateInfoSmall","Price","h2","PriceSmall","StaticPrice","StaticPriceSmall","SavingsWithCurrency","baseRate","toFixed","Savings","TermPrice","free"],"mappings":"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","file":"component---src-pages-index-js-de71b89afbeb0aef415b.js","sourcesContent":["import styled from 'styled-components';\r\n\r\nexport const PlanList = styled.div.attrs({\r\n  className: 'row',\r\n})`\r\n  display: flex;\r\n  justify-content: space-between;\r\n`;\r\n\r\nexport const CardContainer = styled.div.attrs({\r\n  className: 'col-sm-6 col-xl-3 d-flex',\r\n})``;\r\n","import React from 'react';\r\nimport { Redirect } from '@reach/router';\r\nimport { isExternalURL } from './functions';\r\n\r\nexport default function CustomRedirect({ when, to, children }) {\r\n  //* redirect when the condition is true\r\n  if (when) {\r\n    if (isExternalURL(to)) {\r\n      return (window.location = to);\r\n    } else {\r\n      return <Redirect to={to} noThrow />;\r\n    }\r\n  }\r\n\r\n  //* render children\r\n  return <div>{children}</div>;\r\n}\r\n","import React from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport '@i18n/i18n';\r\nimport classNames from 'classnames';\r\n\r\nimport { usePlan } from '@util/providers/Plan';\r\n\r\nexport default function Toggler({ justify = 'left', children }) {\r\n  const { t } = useTranslation();\r\n  const { termIsYearly, setTermIsYearly } = usePlan();\r\n\r\n  return (\r\n    <div\r\n      className={classNames('d-flex', {\r\n        'justify-content-center': justify === 'center',\r\n      })}\r\n    >\r\n      <div className=\"btn-group mt-4 mb-2 my-sm-4\" role=\"group\">\r\n        <button\r\n          className={classNames('btn', {\r\n            'btn-primary': termIsYearly === false,\r\n            'btn-outline-gray  btn-control': termIsYearly === true,\r\n          })}\r\n          type=\"button\"\r\n          id=\"ButtonMonthly\"\r\n          data-testid=\"ButtonMonthly\"\r\n          onClick={() => setTermIsYearly(false)}\r\n        >\r\n          {t('monthly')}\r\n        </button>\r\n        <button\r\n          className={classNames('btn', {\r\n            'btn-primary': termIsYearly === true,\r\n            'btn-outline-gray  btn-control': termIsYearly === false,\r\n          })}\r\n          type=\"button\"\r\n          id=\"ButtonYearly\"\r\n          data-testid=\"ButtonYearly\"\r\n          onClick={() => setTermIsYearly(true)}\r\n        >\r\n          {t('yearly')}\r\n        </button>\r\n      </div>\r\n      {children && <div className=\"align-self-center\">{children}</div>}\r\n    </div>\r\n  );\r\n}\r\n","import styled from 'styled-components';\r\n\r\nconst Card = styled.div.attrs({\r\n  className: 'card',\r\n})``;\r\nCard.Header = styled.h4.attrs({\r\n  className: 'card-header',\r\n})``;\r\nCard.Body = styled.div.attrs({\r\n  className: 'card-body',\r\n})``;\r\n\r\nCard.Footer = styled.div.attrs({\r\n  className: 'card-footer',\r\n})``;\r\n\r\nexport default Card;\r\n","import styled, { css } from 'styled-components';\r\nimport Card from '@ui/Card';\r\nimport { DropdownToggle } from 'reactstrap';\r\n\r\nconst highlightStyle = `\r\nbox-shadow: 0px 5px 5px rgba(0, 0, 0, 0.16);\r\nborder: 1px solid #005b94;\r\n`;\r\nexport const PlanCard = styled(Card)`\r\n  // height: 100%;\r\n  width: 100%;\r\n  //padding-left: 20px !important;\r\n  text-align: center;\r\n  // color: #231f20;\r\n  // background-color: #efeff0;\r\n  transition-property: box-shadow, border;\r\n  transition-duration: 0.15s;\r\n  border: 1px solid transparent;\r\n  &.selected {\r\n    ${highlightStyle}\r\n  }\r\n  ${props =>\r\n    !props.noHover &&\r\n    css`\r\n      :hover {\r\n        ${highlightStyle}\r\n      }\r\n    `}\r\n`;\r\nPlanCard.Header = styled(Card.Header).attrs({\r\n  className: 'pt-4 pr-4 pb-0 pl-4',\r\n})`\r\n  // padding: 2.5rem 1.25rem 0 1.25rem;\r\n  border-bottom: none;\r\n  background: none;\r\n  padding-bottom: 0em;\r\n  text-transform: uppercase;\r\n  font-size: 1.125rem;\r\n`;\r\nPlanCard.Body = styled(Card.Body)`\r\n  padding-top: 0.5rem;\r\n  padding-left: 20px;\r\n  //padding-right: 0px;\r\n  //   p {\r\n  //       font-size:0.875rem;\r\n  //   }\r\n  ul {\r\n    display: block;\r\n    list-style: none;\r\n    padding: 0;\r\n    margin: 0;\r\n    li {\r\n      padding: 0;\r\n      margin: 0;\r\n      font-size: 0.875rem;\r\n    }\r\n  }\r\n  .description {\r\n    font-size: 0.75rem;\r\n  }\r\n  .trial-link {\r\n    margin-top: 1rem;\r\n    // margin-bottom: 1.25rem;\r\n  }\r\n`;\r\nPlanCard.Footer = styled(Card.Footer).attrs({\r\n  className: 'pt-0 pr-4 pb-4 pl-4',\r\n})`\r\n  background: none;\r\n  // padding: 0 1.25rem 2.5rem 1.25rem;\r\n  .plan-card-disclaimer {\r\n    font-size: 0.75rem;\r\n  }\r\n`;\r\n\r\nexport const TermDropdownToggle = styled(DropdownToggle)`\r\n  background: transparent;\r\n  border: 1px solid #efeff0;\r\n  color: black;\r\n  :hover {\r\n    background: transparent;\r\n    border: 1px solid #efeff0;\r\n    color: black;\r\n  }\r\n`;\r\n\r\nexport const LinkButton = styled.button`\r\n  border: 0;\r\n  padding: 0;\r\n  background-color: transparent;\r\n  color: #005bac;\r\n  cursor: pointer;\r\n  :hover {\r\n    text-decoration: underline;\r\n  }\r\n`;\r\n","import React, { useState, useEffect } from 'react';\r\nimport { Trans, useTranslation } from 'react-i18next';\r\nimport { navigate, Link } from 'gatsby';\r\n\r\nimport { PlanList, CardContainer } from '@ui/Plans';\r\nimport Toggler from '@components/Miscellaneous/Toggler';\r\nimport PlanCard from '@components/PlanCard';\r\nimport { useYearlySavings } from '@util/Plans/PlanFunctions';\r\n\r\nexport default function Plans({ plans }) {\r\n  const [showPlanComparison, setShowPlanComparison] = useState(false);\r\n  const [openPlanFeatures, setOpenPlanFeatures] = useState();\r\n  const percentSavings = useYearlySavings();\r\n  const { t } = useTranslation();\r\n\r\n   useEffect(() => {\r\n    //* close open feature on resize\r\n\r\n    function handleResize() {\r\n      setOpenPlanFeatures();\r\n      setShowPlanComparison(false);\r\n    }\r\n\r\n    window.addEventListener('resize', handleResize);\r\n\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, []);\r\n\r\n  function renderCardContainer(plans, x) {\r\n    return (\r\n      <CardContainer key={x}>\r\n        <PlanCard\r\n          plan={plans[x]}\r\n          displayComparisonChart={showPlanComparison}\r\n          className=\"mb-0\"\r\n        />\r\n      </CardContainer>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <>\r\n      {/* mobile toggle */}\r\n      <div\r\n        className=\"position-fixed d-sm-none border-top border-gray\"\r\n        style={{\r\n          zIndex: 1000,\r\n          right: 0,\r\n          left: 0,\r\n          bottom: 0,\r\n          backgroundColor: '#fafafa',\r\n        }}\r\n      >\r\n        <Toggler justify=\"center\" />\r\n        <div className=\"text-center pb-4 text-muted\">\r\n          {/* prettier-ignore */}\r\n          <Trans i18nKey=\"save17Percent\">\r\n            <strong>\r\n              Save\r\n              {{\r\n                percent: percentSavings,\r\n              }}\r\n              %\r\n            </strong>\r\n            with a yearly plan\r\n          </Trans>\r\n        </div>\r\n      </div>\r\n\r\n      {/* non-mobile toggle */}\r\n      <div className=\"d-none d-sm-block\">\r\n        <Toggler justify=\"center\" />\r\n        <h5 className=\"text-center pb-4\">\r\n          {/* prettier-ignore */}\r\n          <Trans i18nKey=\"save17Percent\">\r\n            <strong>\r\n              Save\r\n              {{\r\n                percent: percentSavings,\r\n              }}\r\n              %\r\n            </strong>\r\n            with a yearly plan\r\n          </Trans>\r\n        </h5>\r\n      </div>\r\n\r\n      {\r\n        //* mobile plan list\r\n        <div className=\"d-block d-sm-none mt-3\">\r\n          {plans &&\r\n            plans.map((p, i) => {\r\n              const cols = 1;\r\n              if (i % cols === 0) {\r\n                return (\r\n                  <div key={i} className=\"mb-4\">\r\n                    <PlanList>\r\n                      {(() => {\r\n                        let cards = [];\r\n                        for (let x = 0; x < cols; x++) {\r\n                          if (plans[i + x]) {\r\n                            cards = [\r\n                              ...cards,\r\n                              renderCardContainer(plans, i + x),\r\n                            ];\r\n                          }\r\n                        }\r\n                        return cards;\r\n                      })()}\r\n                    </PlanList>\r\n                  </div>\r\n                );\r\n              }\r\n              return null;\r\n            })}\r\n        </div>\r\n      }\r\n\r\n      {\r\n        //* tablet plan list\r\n      }\r\n      <div className=\"d-none d-sm-block d-xl-none\">\r\n        {plans &&\r\n          plans.map((p, i) => {\r\n            const cols = 2;\r\n            if (i % cols === 0) {\r\n              return (\r\n                <div key={i} className=\"mb-4\">\r\n                  <PlanList>\r\n                    {(() => {\r\n                      let cards = [];\r\n                      for (let x = 0; x < cols; x++) {\r\n                        if (plans[i + x]) {\r\n                          cards = [...cards, renderCardContainer(plans, i + x)];\r\n                        }\r\n                      }\r\n\r\n                      return cards;\r\n                    })()}\r\n                  </PlanList>\r\n                </div>\r\n              );\r\n            }\r\n            return null;\r\n          })}\r\n      </div>\r\n\r\n      {\r\n        //* desktop plan list\r\n      }\r\n      <PlanList className=\"d-none d-xl-flex\">\r\n        {plans &&\r\n          plans.map((p, i) => (\r\n            <CardContainer key={i}>\r\n              <PlanCard\r\n                plan={p}\r\n                displayComparisonChart={showPlanComparison}\r\n                className=\"mb-xl-0\"\r\n              />\r\n            </CardContainer>\r\n          ))}\r\n      </PlanList>\r\n      <div className=\"text-center mt-4\">\r\n        <div className=\"learn-more-link\">\r\n          <button\r\n                onClick={() => navigate('/compare')}\r\n                className=\"btn btn-outline-secondary ml-2\"\r\n              >\r\n                {t('compare:general.title')}\r\n              </button>\r\n        </div>\r\n        {t('subscriptionLicense.toggle.preferencedText')}&nbsp;\r\n        <Link id={'onetime'}\r\n            data-testid={'onetime'}\r\n            to={`/license`}>\r\n              {t('subscriptionLicense.toggle.tolicenseText')}?\r\n          </Link>\r\n      </div>      \r\n    </>\r\n  );\r\n}\r\n","import React, { useEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nimport { usePlan } from '@util/providers/Plan';\r\n\r\nimport { useUser } from '@util/providers/AuthProvider';\r\nimport { useResetSession } from '@util/providers';\r\n\r\nimport PageHeader from '@ui/PageHeader';\r\nimport SEO from '../components/seo';\r\n\r\nimport PlansModule from '../modules/Plans';\r\n\r\nimport Go from '@util/CustomRedirect';\r\n\r\nconst IndexPage = function() {\r\n  const { t } = useTranslation('page');\r\n  const { bmoUser } = useUser();\r\n  const { plans } = usePlan();\r\n  const resetSession = useResetSession();\r\n\r\n  const isSubscriber =\r\n    bmoUser &&\r\n    bmoUser.zuoraInfo &&\r\n    bmoUser.zuoraInfo.subscriptions &&\r\n    bmoUser.zuoraInfo.subscriptions.length !== 0;\r\n  useEffect(() => {\r\n    //* reset\r\n    resetSession();\r\n    // eslint-disable-next-line\r\n  }, []);\r\n\r\n  return (\r\n    <Go to=\"/myplan\" when={isSubscriber}>\r\n      <SEO title={t('subscription')} />\r\n      <div className=\"row\">\r\n        <div className=\"col\">\r\n          <PageHeader>{t('subscription')}</PageHeader>\r\n        </div>\r\n      </div>\r\n\r\n      <PlansModule plans={plans} />\r\n    </Go>\r\n  );\r\n};\r\n\r\nexport default IndexPage;\r\n","import React from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport '@i18n/i18n';\r\nimport {\r\n  RateInfo,\r\n  Price,\r\n  StaticPrice,\r\n  RateInfoSmall,\r\n  PriceSmall,\r\n  StaticPriceSmall,\r\n  SavingsWithCurrency,\r\n} from '@ui/RateInfo';\r\n\r\nimport { formatCurrency, getSubscriptionCurrency } from '@util/functions';\r\nimport { useLocale } from '@util/providers/Locale';\r\n\r\nexport default function({ rate, plan, myPlan = false, showDisplayPrice }) {\r\n  if (rate && rate.price) {\r\n    if (myPlan) {\r\n      return (\r\n        <RateInfoSmall>\r\n          {plan && plan.staticRatePlan && !plan.hasStaticRatePlanPrice ? (\r\n            <StaticPriceSmall>{rate.price}</StaticPriceSmall>\r\n          ) : (\r\n            <PriceSmall>\r\n              <PriceHandler showDisplayPrice={showDisplayPrice}>\r\n                {rate}\r\n              </PriceHandler>\r\n            </PriceSmall>\r\n          )}\r\n\r\n          <TermHandler rate={rate} plan={plan} />\r\n        </RateInfoSmall>\r\n      );\r\n    }\r\n    return (\r\n      <RateInfo>\r\n        {plan && plan.staticRatePlan && !plan.hasStaticRatePlanPrice ? (\r\n          <StaticPrice>{rate.price}</StaticPrice>\r\n        ) : (\r\n          <Price>\r\n            <PriceHandler showDisplayPrice={showDisplayPrice}>\r\n              {rate}\r\n            </PriceHandler>\r\n          </Price>\r\n        )}\r\n\r\n        <TermHandler rate={rate} plan={plan} />\r\n      </RateInfo>\r\n    );\r\n  }\r\n\r\n  return null;\r\n}\r\n\r\nfunction PriceHandler({ children: rate, showDisplayPrice }) {\r\n  const { selectedCurrency } = useLocale();\r\n  const subscriptionCurrency = getSubscriptionCurrency(selectedCurrency);\r\n  return (\r\n    rate.price && (\r\n      <>\r\n        {showDisplayPrice\r\n          ? rate.price\r\n          : formatCurrency(rate.price, subscriptionCurrency, {\r\n              withLabel: false,\r\n              trim: rate.price === parseInt(rate.price), // format currency to remove unnecessary fractional units ex: $99.00 as $99\r\n            })}\r\n        {!showDisplayPrice && <small>{` ${subscriptionCurrency}`}</small>}\r\n      </>\r\n    )\r\n  );\r\n}\r\n\r\nfunction TermHandler(props) {\r\n  const { t } = useTranslation();\r\n  const { rate } = props;\r\n  return (\r\n    <h6>\r\n      {rate.isYearly && !isNaN(rate.price) && (\r\n        <SavingsWithCurrency\r\n          {...props}\r\n          withLabel={false}\r\n          className=\"text-gray\"\r\n        />\r\n      )}{' '}\r\n      <span>\r\n        {rate.isMonthly && t('PerMonth')}\r\n        {rate.isYearly && t('PerYear')}\r\n        {!rate.isMonthly && !rate.isYearly && rate.termName}\r\n      </span>\r\n    </h6>\r\n  );\r\n}\r\n","import React from 'react';\r\nimport { navigate } from 'gatsby';\r\nimport styled from 'styled-components';\r\nimport { useTranslation } from 'react-i18next';\r\nimport {\r\n  UncontrolledDropdown,\r\n  DropdownToggle,\r\n  DropdownMenu,\r\n  DropdownItem,\r\n} from 'reactstrap';\r\nimport { useUser } from '@util/providers/AuthProvider';\r\nimport { usePlan } from '@util/providers/Plan';\r\n\r\nexport default function SubscribeButton({ plan }) {\r\n  const { t } = useTranslation();\r\n  const { ssoUser, bmoUser } = useUser();\r\n  const myPlan = getMyPlan();\r\n  const {\r\n    termIsYearly,\r\n    setSelectedPlan,\r\n    setSelectedRate,\r\n    trialLength,\r\n  } = usePlan();\r\n\r\n  function getMyPlan() {\r\n    const isCommunityUser = bmoUser && !bmoUser.subscriptionInfo;\r\n    const isPersonalUser =\r\n      bmoUser &&\r\n      bmoUser.subscriptionInfo &&\r\n      bmoUser.subscriptionInfo.planType.toLowerCase() === 'family';\r\n    const isProfessionalUser =\r\n      bmoUser &&\r\n      bmoUser.subscriptionInfo &&\r\n      bmoUser.subscriptionInfo.planType.toLowerCase() === 'classroom';\r\n\r\n    const isDistrictUser =\r\n      bmoUser &&\r\n      bmoUser.subscriptionInfo &&\r\n      bmoUser.subscriptionInfo.planType.toLowerCase() === 'district';\r\n\r\n\r\n    if (isCommunityUser) {\r\n      return 'community';\r\n    } else if (isPersonalUser) {\r\n      return 'personal';\r\n    } else if (isProfessionalUser) {\r\n      return 'professional';\r\n    } else if (isDistrictUser) {\r\n      return 'district';\r\n    } \r\n    return null;\r\n  }\r\n\r\n  const canTrial =\r\n    bmoUser && bmoUser.subscriptionInfo\r\n      ? bmoUser.subscriptionInfo.isTrialEligible\r\n      : true;\r\n\r\n  function getRatePlanByType(p) {\r\n    return (\r\n      p.staticRatePlan ||\r\n      p.ratePlans.find(rp => (termIsYearly ? rp.isYearly : rp.isMonthly))\r\n    );\r\n  }\r\n  return (\r\n    <>\r\n      <div>\r\n        {plan.key === 'personal' || plan.key === 'professional' ? (\r\n          <UncontrolledDropdown>\r\n            <DropdownToggle\r\n              id={'GetStarted' + plan?.key}\r\n              data-testid={'GetStarted' + plan?.key}\r\n              color=\"primary\"\r\n              caret\r\n              disabled={myPlan === \"district\"}\r\n            >\r\n              {t('action.getStarted')}\r\n            </DropdownToggle>\r\n            <DropdownMenu>\r\n              <DropdownItem\r\n                key=\"subscribe\"\r\n                id={'SubscribeLink' + plan?.key}\r\n                data-testid={'SubscribeLink' + plan?.key}\r\n                onClick={() => {\r\n                  console.log('TrialLinkClick');\r\n                  setSelectedPlan(plan);\r\n                  setSelectedRate(getRatePlanByType(plan));\r\n                  navigate(\r\n                    ssoUser\r\n                      ? plan.planSelectRoutes.loggedIn\r\n                      : plan.planSelectRoutes.loggedOut\r\n                  );\r\n                }}\r\n              >\r\n                {t(plan.actionText)}\r\n              </DropdownItem>\r\n              {plan.hasTrial && canTrial && (\r\n                <DropdownItem\r\n                  id={'TrialLink' + plan?.key}\r\n                  data-testid={'TrialLink' + plan?.key}\r\n                  onClick={() => {\r\n                    setSelectedPlan(plan);\r\n                    setSelectedRate(\r\n                      plan.ratePlans.filter(\r\n                        ratePlan => ratePlan.isTrial === true\r\n                      )[0]\r\n                    );\r\n                    navigate(\r\n                      ssoUser\r\n                        ? plan.planSelectRoutes.trial.loggedIn\r\n                        : plan.planSelectRoutes.trial.loggedOut\r\n                    );\r\n                  }}\r\n                  key=\"trial\"\r\n                >\r\n                  {t('action.startTrial')}\r\n                </DropdownItem>\r\n              )}\r\n            </DropdownMenu>\r\n          </UncontrolledDropdown>\r\n        ) : plan.key === 'community' && myPlan === 'community' ? (\r\n          <button\r\n            id={'MyPlanLink' + plan?.key}\r\n            data-testid={'MyPlanLink' + plan?.key}\r\n            className=\"btn btn-outline-opaque-secondary\"\r\n            onClick={() => {\r\n              navigate('/redirect', {\r\n                state: {\r\n                  extension: '/You/Home',\r\n                },\r\n              });\r\n            }}\r\n          >\r\n            {t('planCard.myPlan')}\r\n          </button>\r\n        ) : (\r\n          <button\r\n            id={'SubscribeLink' + plan?.key}\r\n            data-testid={'SubscribeLink' + plan?.key}\r\n            className=\"btn btn-primary\"\r\n            disabled={myPlan === \"district\"}\r\n            onClick={() => {\r\n              setSelectedPlan(plan);\r\n              setSelectedRate(getRatePlanByType(plan));\r\n              navigate(\r\n                ssoUser\r\n                  ? plan.planSelectRoutes.loggedIn\r\n                  : plan.planSelectRoutes.loggedOut\r\n              );\r\n            }}\r\n          >\r\n            {t(plan.actionText)}\r\n          </button>\r\n        )}\r\n      </div>\r\n    </>\r\n  );\r\n}\r\n\r\nconst LightBold = styled.span`\r\n  font-weight: 600;\r\n`;\r\n","import React from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { UncontrolledDropdown, DropdownItem, DropdownMenu } from 'reactstrap';\r\n\r\nimport { usePlan } from '@util/providers/Plan';\r\n\r\nimport { TermDropdownToggle } from '@ui/PlanCard';\r\n\r\nexport default function PlanTermSelect() {\r\n  const { t } = useTranslation();\r\n  const { termIsYearly, setTermIsYearly } = usePlan();\r\n  return (\r\n    <UncontrolledDropdown>\r\n      <TermDropdownToggle\r\n        data-toggle=\"dropdown\"\r\n        id=\"TermDropdownToggle\"\r\n        data-testid=\"TermDropdownToggle\"\r\n        className=\"btn-outline-gray\"\r\n        caret\r\n      >\r\n        {termIsYearly ? t('yearly') : t('monthly')} {t('subscription')}\r\n      </TermDropdownToggle>\r\n      <DropdownMenu id=\"TermDropdownMenu\" data-testid=\"TermDropdownMenu\">\r\n        <DropdownItem className=\"pl-3\" onClick={() => setTermIsYearly(false)}>\r\n          <div className=\"custom-control custom-radio custom-control-inline\">\r\n            <input\r\n              type=\"radio\"\r\n              id=\"monthlyTermOption\"\r\n              name=\"styleguideRadioInline\"\r\n              className=\"custom-control-input\"\r\n              checked={termIsYearly ? false : true}\r\n              readOnly\r\n            />\r\n            <label className=\"custom-control-label\" htmlFor=\"monthlyTermOption\">\r\n              {t('monthly')} {t('subscription')}\r\n            </label>\r\n          </div>\r\n        </DropdownItem>\r\n        <DropdownItem className=\"pl-3\" onClick={() => setTermIsYearly(true)}>\r\n          <div className=\"custom-control custom-radio custom-control-inline\">\r\n            <input\r\n              type=\"radio\"\r\n              id=\"yearlyTermOption\"\r\n              name=\"styleguideRadioInline\"\r\n              className=\"custom-control-input\"\r\n              checked={termIsYearly ? true : false}\r\n              readOnly\r\n            />\r\n            <label className=\"custom-control-label\" htmlFor=\"yearlyTermOption\">\r\n              {t('yearly')} {t('subscription')}\r\n            </label>\r\n          </div>\r\n        </DropdownItem>\r\n      </DropdownMenu>\r\n    </UncontrolledDropdown>\r\n  );\r\n}\r\n","import React from 'react';\r\nimport { Link } from 'gatsby';\r\nimport { useTranslation, Trans } from 'react-i18next';\r\nimport styled from 'styled-components';\r\n\r\nimport { useUser } from '@util/providers/AuthProvider';\r\nimport { usePlan } from '@util/providers/Plan';\r\n\r\nimport RateInfo from '@components/PlanCard/RateInfo';\r\nimport { PlanCard } from '@ui/PlanCard';\r\nimport SubscribeButton from './SubscribeButton';\r\nimport PlanTermSelect from './PlanTermSelect';\r\n\r\nexport default function({ plan, hideLearnMoreLink, className }) {\r\n  const { t } = useTranslation();\r\n  const { bmoUser } = useUser();\r\n  const { termIsYearly, trialLength } = usePlan();\r\n\r\n  const community = plan.id === '0';\r\n  const organization = plan.id === '3';\r\n  const personalOrProfessional = !community && !organization;\r\n\r\n  const canTrial =\r\n    bmoUser && bmoUser.subscriptionInfo\r\n      ? bmoUser.subscriptionInfo.isTrialEligible\r\n      : true;\r\n\r\n  //* gets static rate\r\n  //* || gets trial rate\r\n  //* || gets plan rate based on monthly/yearly state\r\n  function getRatePlanByType(p, isTrial) {\r\n    if (p.staticRatePlan) return p.staticRatePlan;\r\n    if (isTrial) return p.ratePlans.find(rp => rp.isTrial);\r\n    return p.ratePlans.find(rp => (termIsYearly ? rp.isYearly : rp.isMonthly));\r\n  }\r\n\r\n  const currentRate = getRatePlanByType(plan);\r\n\r\n  return (\r\n    <>\r\n      <PlanCard className={className}>\r\n        <PlanCard.Header className=\"text-dark\">{plan.name}</PlanCard.Header>\r\n        <PlanCard.Body>\r\n          <p className=\"description d-none d-lg-block\">\r\n            {plan.shortDescription}\r\n          </p>\r\n          <RateInfo rate={currentRate} plan={plan} />\r\n          {hideLearnMoreLink ? (\r\n            personalOrProfessional && <PlanTermSelect />\r\n          ) : (\r\n            <div className=\"learn-more-link\">\r\n              <Link\r\n                id={'LearnMore' + plan.key}\r\n                data-testid={'LearnMore' + plan.key}\r\n                to={`/${plan.key}`}\r\n              >\r\n                {t('action.learnMore')}&nbsp;&rsaquo;\r\n              </Link>\r\n            </div>\r\n          )}\r\n        </PlanCard.Body>\r\n        <PlanCard.Footer className=\"border-0\">\r\n          {plan.hasTrial && canTrial && (\r\n            <div className=\"trial-link\">\r\n              <p>\r\n                {t('action.try')}\r\n                <LightBold> {t('action.free')} </LightBold>\r\n                {/* prettier-ignore */}\r\n                <Trans i18nKey=\"action.forTrialDays\">\r\n                  for\r\n                  {{\r\n                    trialLength: trialLength,\r\n                  }}\r\n                  days\r\n                </Trans>\r\n              </p>\r\n            </div>\r\n          )}\r\n          <SubscribeButton plan={plan} />\r\n          <div className=\"plan-card-disclaimer mt-2\">\r\n            {t(currentRate.disclaimerKey)}\r\n          </div>\r\n        </PlanCard.Footer>\r\n      </PlanCard>\r\n    </>\r\n  );\r\n}\r\n\r\nconst LightBold = styled.span`\r\n  font-weight: 600;\r\n`;\r\n","import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { useLocale } from '@util/providers/Locale';\r\nimport { getSubscriptionCurrency } from '@util/functions';\r\nimport { formatCurrency } from '@util/functions';\r\n\r\nexport const RateInfo = styled.div`\r\n  padding-top: 0.5rem;\r\n  margin-bottom: 1.875rem;\r\n`;\r\nexport const RateInfoSmall = styled(RateInfo)`\r\n  margin-bottom: 1rem;\r\n`;\r\n\r\nexport const Price = styled.h2`\r\n  color: #231f20;\r\n  font-size: 3rem;\r\n  margin-bottom: 0;\r\n  small {\r\n    font-size: 1rem;\r\n  }\r\n`;\r\n\r\nexport const PriceSmall = styled(Price)`\r\n  font-size: 2rem;\r\n  margin-bottom: 0.5rem;\r\n`;\r\n\r\nexport const StaticPrice = styled.h2`\r\n  color: #231f20;\r\n  font-size: 2rem;\r\n  line-height: 1.7875;\r\n  margin-bottom: 0;\r\n`;\r\n\r\nexport const StaticPriceSmall = styled(StaticPrice)`\r\n  line-height: normal;\r\n  margin-bottom: 0.5rem;\r\n`;\r\n\r\nfunction Savings(rate, plan, withLabel) {\r\n  const { selectedCurrency } = useLocale();\r\n  const subscriptionCurrency = getSubscriptionCurrency(selectedCurrency);\r\n  const baseRate = plan.ratePlans.find(rp => rp.baseRate).price;\r\n  return formatCurrency((baseRate * 12).toFixed(2), subscriptionCurrency, {\r\n    withLabel,\r\n  });\r\n}\r\n\r\nexport function SavingsWithCurrency({ rate, plan, withLabel, className }) {\r\n  return <s className={className}>{Savings(rate, plan, withLabel)}</s>;\r\n}\r\n\r\nexport function TermPrice({ rate }) {\r\n  const { selectedCurrency } = useLocale();\r\n  const subscriptionCurrency = getSubscriptionCurrency(selectedCurrency);\r\n  if (rate.free) {\r\n    return rate.price;\r\n  }\r\n\r\n  return (\r\n    <>\r\n      $\r\n      {rate.price != null && `${rate.price.toFixed(2)} ${subscriptionCurrency}`}\r\n    </>\r\n  );\r\n}\r\n"],"sourceRoot":""}