)}
@@ -430,32 +429,45 @@ export const LocalizedAnnouncementString = (
props: LocalizedAnnouncementStringProps,
) => {
const l10n = useL10n();
+ const billingInfo = useSubscriptionBilling();
// Build the key based on the type (fluent IDs are named in this format)
const key = `announcement-${props.announcement.announcement_id}-${props.type}`;
- const localizedString = l10n.getString(key);
-
// If the key is not translated, use the fallback values from the announcements table
- if (localizedString === key) {
- console.warn(`${props.announcement.announcement_id} is not localized`);
-
- if (props.type === "title") {
- return props.announcement.title;
- }
- if (props.type === "description") {
- return props.announcement.description;
- }
- if (props.type === "cta-label") {
- return props.announcement.cta_label;
+ const getFallback = () => {
+ switch (props.type) {
+ case "title":
+ return props.announcement.title;
+ case "description":
+ return props.announcement.description;
+ case "cta-label":
+ return props.announcement.cta_label;
}
+ };
+
+ // If the fluent string doesn't exist, then fallback to the values set in the db
+ const raw = l10n.getString(key);
+ if (raw === key) {
+ return <>{getFallback()};
}
+ // Interpolate vars
+ // Passing vars like { bundleMonthlyPrice: "$9.99" }
+ // to every l10n.getString(key, { vars }) call —
+ // even when the Fluent string doesn't use that variable
+ // is not performance-intensive and is generally fine.
+ // React rendering cost is unchanged: Passing unused variables doesn’t
+ // trigger any additional render complexity.
+ const parsedString = l10n.getString(key, {
+ bundleMonthlyPrice: `$${billingInfo.monthly}`,
+ });
+
return (
<>
{props.truncatedDescription
- ? truncateDescription(localizedString)
- : localizedString}
+ ? truncateDescription(parsedString)
+ : parsedString}
);
};
diff --git a/src/contextProviders/subscription-billing-context.tsx b/src/contextProviders/subscription-billing-context.tsx
new file mode 100644
index 00000000000..012eecba7be
--- /dev/null
+++ b/src/contextProviders/subscription-billing-context.tsx
@@ -0,0 +1,36 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use client";
+
+import React, { createContext, useContext } from "react";
+import { SubscriptionBillingAmount } from "../app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/PricingPlanListWithBundle";
+
+const SubscriptionBillingContext =
+ createContext(null);
+
+export function SubscriptionBillingProvider({
+ children,
+ value,
+}: {
+ children: React.ReactNode;
+ value: SubscriptionBillingAmount;
+}) {
+ return (
+
+ {children}
+
+ );
+}
+
+export function useSubscriptionBilling(): SubscriptionBillingAmount {
+ const ctx = useContext(SubscriptionBillingContext);
+ /* c8 ignore next 5 */
+ if (!ctx) {
+ throw new Error(
+ "useSubscriptionBilling must be used inside SubscriptionBillingProvider",
+ );
+ }
+ return ctx;
+}