mozilla
/
blurts-server
зеркало из https://github.com/mozilla/blurts-server.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

chore: Move subscription billing info to env variable

This commit is contained in:
Florian Zia 2024-01-24 17:22:25 +01:00
Родитель 6ce3bcdb02
Коммит 773c36c7f4
Не найден ключ, соответствующий данной подписи
21 изменённых файлов: 166 добавлений и 9 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

3
.env-dist
Просмотреть файл

@ -132,6 +132,9 @@ FXA_SUBSCRIPTIONS_URL=https://accounts.stage.mozaws.net/subscriptions
PREMIUM_PRODUCT_ID=prod_NErZh679W62lai
PREMIUM_PLAN_ID_MONTHLY_US=price_1MUNq0Kb9q6OnNsL4BoJgepf
PREMIUM_PLAN_ID_YEARLY_US=
SUBSCRIPTION_BILLING_AMOUNT_YEARLY_US=13.37
SUBSCRIPTION_BILLING_AMOUNT_MONTHLY_US=42.42
# This date is used to direct users who signed up after data broker scanning
# was released to the welcome flow. Users who had signed up before and thus
# have seen data breach results before, will be able to see their known breaches

8
src/app/(proper_react)/(redesign)/(authenticated)/admin/feature-flags/page.tsx
Просмотреть файл

@ -105,6 +105,14 @@ export default async function FeatureFlagPage() {
user={session.user}
monthlySubscriptionUrl={monthlySubscriptionUrl}
yearlySubscriptionUrl={yearlySubscriptionUrl}
subscriptionBillingAmount={{
yearly: parseFloat(
process.env.SUBSCRIPTION_BILLING_AMOUNT_YEARLY_US as string,
),
monthly: parseFloat(
process.env.SUBSCRIPTION_BILLING_AMOUNT_MONTHLY_US as string,
),
}}
fxaSettingsUrl={fxaSettingsUrl}
/>
</div>

4
src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/Dashboard.stories.tsx
Просмотреть файл

@ -161,6 +161,10 @@ const DashboardWrapper = (props: DashboardWrapperProps) => {
fxaSettingsUrl=""
scanCount={scanCount}
totalNumberOfPerformedScans={props.totalNumberOfPerformedScans}
subscriptionBillingAmount={{
yearly: 13.37,
monthly: 42.42,
}}
/>
</Shell>
</CountryCodeProvider>

3
src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/DashboardTopBanner/DashboardTopBannerContent.tsx
Просмотреть файл

@ -56,6 +56,7 @@ export const DashboardTopBannerContent = (props: DashboardTopBannerProps) => {
onShowFixed,
monthlySubscriptionUrl,
yearlySubscriptionUrl,
subscriptionBillingAmount,
} = props;
const waitlistDialogState = useOverlayTriggerState({});
@ -302,6 +303,7 @@ export const DashboardTopBannerContent = (props: DashboardTopBannerProps) => {
)}
monthlySubscriptionUrl={monthlySubscriptionUrl}
yearlySubscriptionUrl={yearlySubscriptionUrl}
subscriptionBillingAmount={subscriptionBillingAmount}
/>
</div>
</>
@ -411,6 +413,7 @@ export const DashboardTopBannerContent = (props: DashboardTopBannerProps) => {
)}
monthlySubscriptionUrl={monthlySubscriptionUrl}
yearlySubscriptionUrl={yearlySubscriptionUrl}
subscriptionBillingAmount={subscriptionBillingAmount}
/>
</div>
</>

5
src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/DashboardTopBanner/index.tsx
Просмотреть файл

@ -24,6 +24,10 @@ export type DashboardTopBannerProps = {
onShowFixed: () => void;
monthlySubscriptionUrl: string;
yearlySubscriptionUrl: string;
subscriptionBillingAmount: {
yearly: number;
monthly: number;
};
totalNumberOfPerformedScans?: number;
};
@ -59,6 +63,7 @@ export const DashboardTopBanner = (props: DashboardTopBannerProps) => {
onShowFixed={props.onShowFixed}
monthlySubscriptionUrl={props.monthlySubscriptionUrl}
yearlySubscriptionUrl={props.yearlySubscriptionUrl}
subscriptionBillingAmount={props.subscriptionBillingAmount}
totalNumberOfPerformedScans={props.totalNumberOfPerformedScans}
/>
<div className={styles.chart}>

6
src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/View.tsx
Просмотреть файл

@ -58,6 +58,10 @@ export type Props = {
isEligibleForPremium: boolean;
monthlySubscriptionUrl: string;
yearlySubscriptionUrl: string;
subscriptionBillingAmount: {
yearly: number;
monthly: number;
};
fxaSettingsUrl: string;
scanCount: number;
totalNumberOfPerformedScans?: number;
@ -378,6 +382,7 @@ export const View = (props: Props) => {
user={props.user}
monthlySubscriptionUrl={props.monthlySubscriptionUrl}
yearlySubscriptionUrl={props.yearlySubscriptionUrl}
subscriptionBillingAmount={props.subscriptionBillingAmount}
fxaSettingsUrl={props.fxaSettingsUrl}
>
<TabList
@ -421,6 +426,7 @@ export const View = (props: Props) => {
}}
monthlySubscriptionUrl={props.monthlySubscriptionUrl}
yearlySubscriptionUrl={props.yearlySubscriptionUrl}
subscriptionBillingAmount={props.subscriptionBillingAmount}
totalNumberOfPerformedScans={props.totalNumberOfPerformedScans}
/>
<section className={styles.exposuresArea}>

4
src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/automatic-remove/AutomaticRemove.stories.tsx
Просмотреть файл

@ -66,6 +66,10 @@ export const AutomaticRemoveViewStory: Story = {
currentSection="data-broker-profiles"
monthlySubscriptionUrl=""
yearlySubscriptionUrl=""
subscriptionBillingAmount={{
yearly: 13.37,
monthly: 42.42,
}}
/>
</Shell>
);

8
src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/automatic-remove/AutomaticRemoveView.tsx
Просмотреть файл

@ -14,6 +14,10 @@ import { CONST_ONEREP_DATA_BROKER_COUNT } from "../../../../../../../../../../co
export type Props = Omit<ComponentProps<typeof FixView>, "children"> & {
monthlySubscriptionUrl: string;
yearlySubscriptionUrl: string;
subscriptionBillingAmount: {
yearly: number;
monthly: number;
};
};
export function AutomaticRemoveView(props: Props) {
@ -131,11 +135,11 @@ export function AutomaticRemoveView(props: Props) {
{selectedPlanIsYearly
? l10n.getString(
"fix-flow-data-broker-profiles-automatic-remove-features-price",
{ price: "X.XX" },
{ price: props.subscriptionBillingAmount["yearly"] },
)
: l10n.getString(
"fix-flow-data-broker-profiles-automatic-remove-features-price",
{ price: "X.XX" },
{ price: props.subscriptionBillingAmount["monthly"] },
)}
</span>
<Button

8
src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/automatic-remove/page.tsx
Просмотреть файл

@ -50,6 +50,14 @@ export default async function AutomaticRemovePage() {
currentSection="data-broker-profiles"
monthlySubscriptionUrl={monthlySubscriptionUrl}
yearlySubscriptionUrl={yearlySubscriptionUrl}
subscriptionBillingAmount={{
yearly: parseFloat(
process.env.SUBSCRIPTION_BILLING_AMOUNT_YEARLY_US as string,
),
monthly: parseFloat(
process.env.SUBSCRIPTION_BILLING_AMOUNT_MONTHLY_US as string,
),
}}
/>
);
}

8
src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/page.tsx
Просмотреть файл

@ -164,6 +164,14 @@ export default async function DashboardPage() {
enabledFeatureFlags={enabledFeatureFlags}
monthlySubscriptionUrl={monthlySubscriptionUrl}
yearlySubscriptionUrl={yearlySubscriptionUrl}
subscriptionBillingAmount={{
yearly: parseFloat(
process.env.SUBSCRIPTION_BILLING_AMOUNT_YEARLY_US as string,
),
monthly: parseFloat(
process.env.SUBSCRIPTION_BILLING_AMOUNT_MONTHLY_US as string,
),
}}
fxaSettingsUrl={fxaSettingsUrl}
scanCount={scanCount}
totalNumberOfPerformedScans={profileStats?.total}

20
src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/SettingsPage.test.tsx
Просмотреть файл

@ -69,6 +69,10 @@ const mockedSecondaryUnverifiedEmail: EmailRow = {
subscriber_id: subscriberId,
verified: false,
};
const mockedSubscriptionBillingAmount = {
yearly: 13.37,
monthly: 42.42,
};
it("passes the axe accessibility audit", async () => {
const { container } = render(
@ -89,6 +93,7 @@ it("passes the axe accessibility audit", async () => {
fxaSubscriptionsUrl=""
yearlySubscriptionUrl=""
monthlySubscriptionUrl=""
subscriptionBillingAmount={mockedSubscriptionBillingAmount}
/>
</TestComponentWrapper>,
);
@ -116,6 +121,7 @@ it("preselects 'Send all breach alerts to the primary email address' if that's t
fxaSubscriptionsUrl=""
yearlySubscriptionUrl=""
monthlySubscriptionUrl=""
subscriptionBillingAmount={mockedSubscriptionBillingAmount}
/>
</TestComponentWrapper>,
);
@ -152,6 +158,7 @@ it("preselects 'Send breach alerts to the affected email address' if that's the
fxaSubscriptionsUrl=""
yearlySubscriptionUrl=""
monthlySubscriptionUrl=""
subscriptionBillingAmount={mockedSubscriptionBillingAmount}
/>
</TestComponentWrapper>,
);
@ -190,6 +197,7 @@ it("sends a call to the API to change the email alert preferences when changing
fxaSubscriptionsUrl=""
yearlySubscriptionUrl=""
monthlySubscriptionUrl=""
subscriptionBillingAmount={mockedSubscriptionBillingAmount}
/>
</TestComponentWrapper>,
);
@ -237,6 +245,7 @@ it("refreshes the session token after changing email alert preferences, to ensur
fxaSubscriptionsUrl=""
yearlySubscriptionUrl=""
monthlySubscriptionUrl=""
subscriptionBillingAmount={mockedSubscriptionBillingAmount}
/>
</TestComponentWrapper>,
);
@ -268,6 +277,7 @@ it("marks unverified email addresses as such", () => {
fxaSubscriptionsUrl=""
yearlySubscriptionUrl=""
monthlySubscriptionUrl=""
subscriptionBillingAmount={mockedSubscriptionBillingAmount}
/>
</TestComponentWrapper>,
);
@ -300,6 +310,7 @@ it("calls the API to resend a verification email if requested to", async () => {
fxaSubscriptionsUrl=""
yearlySubscriptionUrl=""
monthlySubscriptionUrl=""
subscriptionBillingAmount={mockedSubscriptionBillingAmount}
/>
</TestComponentWrapper>,
);
@ -342,6 +353,7 @@ it("calls the 'remove' action when clicking the rubbish bin icon", async () => {
fxaSubscriptionsUrl=""
yearlySubscriptionUrl=""
monthlySubscriptionUrl=""
subscriptionBillingAmount={mockedSubscriptionBillingAmount}
/>
</TestComponentWrapper>,
);
@ -372,6 +384,7 @@ it("hides the Plus cancellation link if the user doesn't have Plus", () => {
fxaSubscriptionsUrl=""
yearlySubscriptionUrl=""
monthlySubscriptionUrl=""
subscriptionBillingAmount={mockedSubscriptionBillingAmount}
/>
</TestComponentWrapper>,
);
@ -403,6 +416,7 @@ it("shows the Plus cancellation link if the user has Plus", () => {
fxaSubscriptionsUrl=""
yearlySubscriptionUrl=""
monthlySubscriptionUrl=""
subscriptionBillingAmount={mockedSubscriptionBillingAmount}
/>
</TestComponentWrapper>,
);
@ -440,6 +454,7 @@ it.skip("calls the 'add' action when adding another email address", async () =>
fxaSubscriptionsUrl=""
yearlySubscriptionUrl=""
monthlySubscriptionUrl=""
subscriptionBillingAmount={mockedSubscriptionBillingAmount}
/>
</TestComponentWrapper>,
);
@ -470,6 +485,7 @@ describe("to learn about usage", () => {
fxaSubscriptionsUrl=""
yearlySubscriptionUrl=""
monthlySubscriptionUrl=""
subscriptionBillingAmount={mockedSubscriptionBillingAmount}
/>
</TestComponentWrapper>,
);
@ -504,6 +520,7 @@ describe("to learn about usage", () => {
fxaSubscriptionsUrl=""
yearlySubscriptionUrl=""
monthlySubscriptionUrl=""
subscriptionBillingAmount={mockedSubscriptionBillingAmount}
/>
</TestComponentWrapper>,
);
@ -538,6 +555,7 @@ describe("to learn about usage", () => {
fxaSubscriptionsUrl=""
yearlySubscriptionUrl=""
monthlySubscriptionUrl=""
subscriptionBillingAmount={mockedSubscriptionBillingAmount}
/>
</TestComponentWrapper>,
);
@ -577,6 +595,7 @@ describe("to learn about usage", () => {
fxaSubscriptionsUrl=""
yearlySubscriptionUrl=""
monthlySubscriptionUrl=""
subscriptionBillingAmount={mockedSubscriptionBillingAmount}
/>
</TestComponentWrapper>,
);
@ -616,6 +635,7 @@ describe("to learn about usage", () => {
fxaSubscriptionsUrl=""
yearlySubscriptionUrl=""
monthlySubscriptionUrl=""
subscriptionBillingAmount={mockedSubscriptionBillingAmount}
/>
</TestComponentWrapper>,
);

5
src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/View.tsx
Просмотреть файл

@ -20,6 +20,10 @@ export type Props = {
user: Session["user"];
monthlySubscriptionUrl: string;
yearlySubscriptionUrl: string;
subscriptionBillingAmount: {
yearly: number;
monthly: number;
};
fxaSettingsUrl: string;
fxaSubscriptionsUrl: string;
emailAddresses: EmailRow[];
@ -35,6 +39,7 @@ export const SettingsView = (props: Props) => {
user={props.user}
monthlySubscriptionUrl={props.monthlySubscriptionUrl}
yearlySubscriptionUrl={props.yearlySubscriptionUrl}
subscriptionBillingAmount={props.subscriptionBillingAmount}
fxaSettingsUrl={props.fxaSettingsUrl}
/>
<main>

8
src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/page.tsx
Просмотреть файл

@ -51,6 +51,14 @@ export default async function SettingsPage() {
fxaSubscriptionsUrl={fxaSubscriptionsUrl}
monthlySubscriptionUrl={monthlySubscriptionUrl}
yearlySubscriptionUrl={yearlySubscriptionUrl}
subscriptionBillingAmount={{
yearly: parseFloat(
process.env.SUBSCRIPTION_BILLING_AMOUNT_YEARLY_US as string,
),
monthly: parseFloat(
process.env.SUBSCRIPTION_BILLING_AMOUNT_MONTHLY_US as string,
),
}}
/>
);
}

8
src/app/(proper_react)/(redesign)/(public)/LandingView.tsx
Просмотреть файл

@ -326,6 +326,14 @@ const Plans = (props: Props) => {
monthly: getPremiumSubscriptionUrl({ type: "monthly" }),
yearly: getPremiumSubscriptionUrl({ type: "yearly" }),
}}
subscriptionBillingAmount={{
yearly: parseFloat(
process.env.SUBSCRIPTION_BILLING_AMOUNT_YEARLY_US as string,
),
monthly: parseFloat(
process.env.SUBSCRIPTION_BILLING_AMOUNT_MONTHLY_US as string,
),
}}
scanLimitReached={props.scanLimitReached}
/>
</div>

9
src/app/(proper_react)/(redesign)/(public)/PlansTable.tsx
Просмотреть файл

@ -64,15 +64,16 @@ export type Props = {
monthly: string;
yearly: string;
};
subscriptionBillingAmount: {
yearly: number;
monthly: number;
};
};
type ScanLimitProp = {
scanLimitReached: boolean;
};
const monthlyPriceAnnualBilling = 13.37;
const monthlyPriceMonthlyBilling = 42.42;
export const PlansTable = (props: Props & ScanLimitProp) => {
const l10n = useL10n();
const recordTelemetry = useTelemetry();
@ -88,6 +89,8 @@ export const PlansTable = (props: Props & ScanLimitProp) => {
currencyDisplay: "narrowSymbol",
});
const [billingPeriod, setBillingPeriod] = useState<BillingPeriod>("yearly");
const monthlyPriceAnnualBilling = props.subscriptionBillingAmount["yearly"];
const monthlyPriceMonthlyBilling = props.subscriptionBillingAmount["monthly"];
return (
<>

5
src/app/(proper_react)/(redesign)/MobileShell.tsx
Просмотреть файл

@ -21,6 +21,10 @@ export type Props = {
session: Session;
monthlySubscriptionUrl: string;
yearlySubscriptionUrl: string;
subscriptionBillingAmount: {
yearly: number;
monthly: number;
};
fxaSettingsUrl: string;
children: ReactNode;
};
@ -139,6 +143,7 @@ export const MobileShell = (props: Props) => {
user={props.session.user}
monthlySubscriptionUrl={props.monthlySubscriptionUrl}
yearlySubscriptionUrl={props.yearlySubscriptionUrl}
subscriptionBillingAmount={props.subscriptionBillingAmount}
/>
</div>
</div>

8
src/app/(proper_react)/(redesign)/Shell.tsx
Просмотреть файл

@ -38,6 +38,14 @@ export const Shell = (props: Props) => {
monthlySubscriptionUrl={monthlySubscriptionUrl}
yearlySubscriptionUrl={yearlySubscriptionUrl}
fxaSettingsUrl={process.env.FXA_SETTINGS_URL!}
subscriptionBillingAmount={{
yearly: parseFloat(
process.env.SUBSCRIPTION_BILLING_AMOUNT_YEARLY_US as string,
),
monthly: parseFloat(
process.env.SUBSCRIPTION_BILLING_AMOUNT_MONTHLY_US as string,
),
}}
>
<div className={styles.wrapper}>
<nav

6
src/app/components/client/UpsellBadge.tsx
Просмотреть файл

@ -27,6 +27,10 @@ import { CountryCodeContext } from "../../../contextProviders/country-code";
export type UpsellButtonProps = {
monthlySubscriptionUrl: string;
yearlySubscriptionUrl: string;
subscriptionBillingAmount: {
yearly: number;
monthly: number;
};
user?: Session["user"];
};
@ -72,6 +76,7 @@ export function UpsellButton(
state={dialogState}
monthlySubscriptionUrl={props.monthlySubscriptionUrl}
yearlySubscriptionUrl={props.yearlySubscriptionUrl}
subscriptionBillingAmount={props.subscriptionBillingAmount}
/>
)}
</>
@ -126,6 +131,7 @@ function UpsellToggleButton(props: UpsellToggleButton) {
state={dialogState}
monthlySubscriptionUrl={props.monthlySubscriptionUrl}
yearlySubscriptionUrl={props.yearlySubscriptionUrl}
subscriptionBillingAmount={props.subscriptionBillingAmount}
/>
)}
</>

38
src/app/components/client/UpsellDialog.tsx
Просмотреть файл

@ -21,9 +21,19 @@ export interface UpsellDialogProps {
state: OverlayTriggerState;
monthlySubscriptionUrl: string;
yearlySubscriptionUrl: string;
subscriptionBillingAmount: {
yearly: number;
monthly: number;
};
}
function PremiumPricingLabel({ isMonthly }: { isMonthly?: boolean }) {
function PremiumPricingLabel({
subscriptionBillingAmount,
isMonthly,
}: {
subscriptionBillingAmount: UpsellDialogProps["subscriptionBillingAmount"];
isMonthly?: boolean;
}) {
const l10n = useL10n();
return (
@ -54,7 +64,11 @@ function PremiumPricingLabel({ isMonthly }: { isMonthly?: boolean }) {
<b>
{l10n.getString(
"fix-flow-data-broker-profiles-automatic-remove-features-price",
{ price: isMonthly ? "X.XX" : "Y.YY" },
{
price: isMonthly
? subscriptionBillingAmount["monthly"]
: subscriptionBillingAmount["yearly"],
},
)}
</b>
</div>
@ -65,11 +79,16 @@ function PremiumPricingLabel({ isMonthly }: { isMonthly?: boolean }) {
export interface UpsellDialogContentProps {
monthlySubscriptionUrl: string;
yearlySubscriptionUrl: string;
subscriptionBillingAmount: {
yearly: number;
monthly: number;
};
}
function UpsellDialogContent({
monthlySubscriptionUrl,
yearlySubscriptionUrl,
subscriptionBillingAmount,
}: UpsellDialogContentProps) {
const l10n = useL10n();
const defaultSelectedKey = "yearly";
@ -83,14 +102,23 @@ function UpsellDialogContent({
"fix-flow-data-broker-profiles-automatic-remove-features-select-plan-toggle-yearly",
),
key: "yearly",
content: <PremiumPricingLabel />,
content: (
<PremiumPricingLabel
subscriptionBillingAmount={subscriptionBillingAmount}
/>
),
},
{
name: l10n.getString(
"fix-flow-data-broker-profiles-automatic-remove-features-select-plan-toggle-monthly",
),
key: "monthly",
content: <PremiumPricingLabel isMonthly />,
content: (
<PremiumPricingLabel
subscriptionBillingAmount={subscriptionBillingAmount}
isMonthly
/>
),
},
];
@ -178,6 +206,7 @@ function UpsellDialog({
state,
yearlySubscriptionUrl,
monthlySubscriptionUrl,
subscriptionBillingAmount,
...otherProps
}: UpsellDialogProps & OverlayTriggerProps) {
const l10n = useL10n();
@ -200,6 +229,7 @@ function UpsellDialog({
<UpsellDialogContent
monthlySubscriptionUrl={monthlySubscriptionUrl}
yearlySubscriptionUrl={yearlySubscriptionUrl}
subscriptionBillingAmount={subscriptionBillingAmount}
/>
</Dialog>
</ModalOverlay>

6
src/app/components/client/stories/UpsellCta.stories.tsx
Просмотреть файл

@ -17,6 +17,10 @@ type UpsellCtaWrapperProps = {
const UpsellCtaWrapper = (props: UpsellCtaWrapperProps) => {
const monthlySubscriptionUrl = "price_monthly";
const yearlySubscriptionUrl = "price_yearly";
const subscriptionBillingAmount = {
yearly: 13.37,
monthly: 42.42,
};
return (
<CountryCodeProvider countryCode={props.countryCode}>
@ -25,12 +29,14 @@ const UpsellCtaWrapper = (props: UpsellCtaWrapperProps) => {
user={props.user}
monthlySubscriptionUrl={monthlySubscriptionUrl}
yearlySubscriptionUrl={yearlySubscriptionUrl}
subscriptionBillingAmount={subscriptionBillingAmount}
/>
) : (
<UpsellButton
label="Get continuous protection"
monthlySubscriptionUrl={monthlySubscriptionUrl}
yearlySubscriptionUrl={yearlySubscriptionUrl}
subscriptionBillingAmount={subscriptionBillingAmount}
/>
)}
</CountryCodeProvider>

5
src/app/components/client/toolbar/Toolbar.tsx
Просмотреть файл

@ -15,6 +15,10 @@ export type Props = {
user: Session["user"];
monthlySubscriptionUrl: string;
yearlySubscriptionUrl: string;
subscriptionBillingAmount: {
yearly: number;
monthly: number;
};
fxaSettingsUrl: string;
children?: ReactNode;
};
@ -28,6 +32,7 @@ export const Toolbar = (props: Props) => {
user={props.user}
monthlySubscriptionUrl={props.monthlySubscriptionUrl}
yearlySubscriptionUrl={props.yearlySubscriptionUrl}
subscriptionBillingAmount={props.subscriptionBillingAmount}
/>
<AppPicker />
{props.user && (