monthly_price: getBundlePrice()

in frontend/src/components/landing/PlanMatrix.tsx [344:423]
79 lines of code
2 McCabe index (conditional complexity)

                      monthly_price: getBundlePrice(props.runtimeData, l10n),
                    })}
                  </span>
                  <a
                    ref={bundleButtonDesktopRef}
                    href={getBundleSubscribeLink(props.runtimeData)}
                    onClick={() =>
                      trackPlanPurchaseStart(
                        gaEvent,
                        { plan: "bundle" },
                        { label: "plan-matrix-bundle-cta-desktop" },
                      )
                    }
                    className={styles["pick-button"]}
                  >
                    {l10n.getString("plan-matrix-sign-up")}
                  </a>
                  <small>
                    {l10n.getString(
                      "plan-matrix-price-period-yearly-footnote-1",
                    )}
                  </small>
                </div>
              </div>
            ) : (
              <div className={`${styles.pricing} ${styles["single-price"]}`}>
                <div className={styles["pricing-overview"]}>
                  <span className={styles.price}>
                    {/* Clunky method to make sure the .pick-button is aligned
                        with the buttons for plans that do display a price */}
                    &nbsp;
                  </span>
                  <Link
                    href="/vpn-relay/waitlist"
                    className={styles["pick-button"]}
                  >
                    {l10n.getString("plan-matrix-join-waitlist")}
                  </Link>
                  <small>
                    {l10n.getString(
                      "plan-matrix-price-period-monthly-footnote-1",
                    )}
                  </small>
                </div>
              </div>
            )}
          </td>
        </tr>
      </tfoot>
    </table>
  );

  const mobileView = (
    <div className={styles.mobile}>
      <ul className={styles.plans}>
        <li className={styles.plan}>
          <h3>{l10n.getString("plan-matrix-heading-plan-free")}</h3>
          <MobileFeatureList list={freeFeatures} />
          <div className={styles.pricing}>
            <div className={styles["pricing-overview"]}>
              <span className={styles.price}>
                {l10n.getString("plan-matrix-price-free")}
              </span>
              <LinkButton
                ref={freeButtonMobileRef}
                href={getRuntimeConfig().fxaLoginUrl}
                onClick={() => countSignIn("plan-matrix-free-cta-mobile")}
                className={styles["primary-pick-button"]}
              >
                {l10n.getString("plan-matrix-get-relay-cta")}
              </LinkButton>
            </div>
          </div>
        </li>
        <li className={styles.plan}>
          <h3>{l10n.getString("plan-matrix-heading-plan-premium")}</h3>
          <MobileFeatureList list={premiumFeatures} />
          {isPeriodicalPremiumAvailableInCountry(props.runtimeData) ? (
            <PricingToggle
              monthlyBilled={{