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. */}
</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", {