monthly_price: getBundlePrice()

in frontend/src/components/landing/PlanMatrix.tsx [570:618]


                    monthly_price: getBundlePrice(props.runtimeData, l10n),
                  })}
                </span>
                <a
                  ref={bundleButtonMobileRef}
                  href={getBundleSubscribeLink(props.runtimeData)}
                  onClick={() =>
                    trackPlanPurchaseStart(
                      gaEvent,
                      { plan: "bundle" },
                      { label: "plan-matrix-bundle-cta-mobile" },
                    )
                  }
                  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}>
              <div className={styles["pricing-overview"]}>
                <span className={styles.price}>
                  {/* Clunky method to make sure that there's whitespace
                        where the prices are for other plans on the same row. */}
                  &nbsp;
                </span>
                <Link
                  href="/vpn-relay/waitlist"
                  className={styles["pick-button"]}
                >
                  {l10n.getString("plan-matrix-join-waitlist")}
                </Link>
              </div>
            </div>
          )}
        </li>
      </ul>
    </div>
  );

  return (
    <div className={styles.wrapper}>
      {isBundleAvailableInCountry(props.runtimeData) && (
        <h2 className={styles["bundle-offer-heading"]}>
          {l10n.getString("plan-matrix-offer-title", {