in src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/DashboardTopBanner/DashboardTopBannerContent.tsx [101:691]
function getDashboardBannerContent({
userDashboardState,
relevantGuidedStep,
}: {
userDashboardState: UserDashboardState;
relevantGuidedStep: StepLink;
}) {
switch (userDashboardState) {
case "NonEligiblePremiumUserNoBreaches":
return (
<>
<h3>
{l10n.getString("dashboard-top-banner-no-exposures-found-title")}
</h3>
<p>
{l10n.getString(
"dashboard-top-banner-non-us-no-exposures-found-description",
)}
</p>
<div className={styles.cta}>
<Button
href="/user/settings"
small
variant="primary"
onPress={() => {
recordTelemetry("ctaButton", "click", {
button_id: "non_eligible_premium_no_breaches",
});
}}
>
{l10n.getString("dashboard-top-banner-monitor-more-cta")}
</Button>
</div>
</>
);
case "NonEligiblePremiumUserUnresolvedBreaches":
return (
<>
<h3>
{l10n.getString("dashboard-top-banner-protect-your-data-title")}
</h3>
<p>
{l10n.getString(
"dashboard-top-banner-non-us-protect-your-data-description-line1",
{
exposures_unresolved_num:
bannerData.totalDataPointsNum -
bannerData.dataBrokerAutoFixedDataPointsNum -
bannerData.dataBreachFixedDataPointsNum -
bannerData.dataBrokerInProgressDataPointsNum -
bannerData.dataBrokerManuallyResolvedDataPointsNum,
},
)}{" "}
{l10n.getString(
"dashboard-top-banner-non-us-protect-your-data-description-line2",
{
data_breach_unresolved_num:
bannerData.dataBreachUnresolvedNum,
},
)}
</p>
<div className={styles.cta}>
<Button
href={relevantGuidedStep.href}
small
variant="primary"
onPress={() => {
recordTelemetry("ctaButton", "click", {
button_id: "non_eligible_premium_unresolved_breaches",
});
}}
>
{l10n.getString("dashboard-top-banner-protect-your-data-cta")}
</Button>
</div>
</>
);
case "NonEligiblePremiumUserResolvedBreaches":
return (
<>
<h3>
{l10n.getString(
"dashboard-top-banner-your-data-is-protected-title",
)}
</h3>
<p>
{l10n.getString(
"dashboard-top-banner-non-us-your-data-is-protected-description",
{
exposures_resolved_num: bannerData.totalDataPointsNum,
},
)}
</p>
<div className={styles.cta}>
<Button
onPress={() => {
contentProps.onShowFixed();
recordTelemetry("ctaButton", "click", {
button_id: "non_eligible_premium_resolved_breaches",
});
}}
small
variant="primary"
>
{l10n.getString(
"dashboard-top-banner-your-data-is-protected-cta",
)}
</Button>
</div>
</>
);
case "UsUserNonPremiumWithoutScan":
return (
<>
<h3>
{l10n.getString(
"dashboard-top-banner-monitor-protects-your-even-more-title",
)}
</h3>
<p>
{l10n.getString(
"dashboard-top-banner-monitor-protects-your-even-more-description",
{
data_broker_sites_total_num: CONST_ONEREP_DATA_BROKER_COUNT,
},
)}
</p>
<div className={styles.cta}>
{typeof props.totalNumberOfPerformedScans === "undefined" ||
props.totalNumberOfPerformedScans <
CONST_ONEREP_MAX_SCANS_THRESHOLD ? (
<Button
href="/user/welcome/free-scan?referrer=dashboard"
small
variant="primary"
onPress={() => {
recordTelemetry("ctaButton", "click", {
button_id: `us_non_premium_no_scan${
contentProps.hasUnresolvedBreaches
? "_unresolved_breaches"
: ""
}`,
});
}}
>
{l10n.getString(
"dashboard-top-banner-monitor-protects-your-even-more-cta",
)}
</Button>
) : (
<>
<Button
variant={"primary"}
small
{...waitlistDialogTrigger.triggerProps}
>
{l10n.getString(
"dashboard-top-banner-monitor-protects-your-even-more-cta",
)}
</Button>
<WaitlistDialog
dialogTriggerState={waitlistDialogState}
{...waitlistDialogTrigger.triggerProps}
/>
</>
)}
</div>
<Link
data-testid="learn-more-link-to-how-it-works"
href="/how-it-works"
target="_blank"
onClick={() =>
recordTelemetry("link", "click", {
link_id: "learn_more",
})
}
>
{l10n.getString(
"dashboard-top-banner-monitor-protects-your-even-more-learn-more",
)}
</Link>
</>
);
case "UsUserNonPremiumNoExposures":
return (
<>
<h3>
{l10n.getString("dashboard-top-banner-no-exposures-found-title")}
</h3>
<p>
{l10n.getString(
"dashboard-top-banner-no-exposures-found-description",
{
data_broker_sites_total_num: CONST_ONEREP_DATA_BROKER_COUNT,
},
)}
</p>
<p>
{l10n.getString(
"dashboard-top-banner-no-exposures-found-upsell-info",
)}
</p>
<div className={styles.cta}>
<UpsellButton
label={l10n.getString(
"dashboard-top-banner-no-exposures-found-cta",
)}
monthlySubscriptionUrl={monthlySubscriptionUrl}
yearlySubscriptionUrl={yearlySubscriptionUrl}
subscriptionBillingAmount={subscriptionBillingAmount}
/>
</div>
</>
);
case "UsUserNonPremiumWithScanUnresolvedExposures":
return (
<>
<h3>
{l10n.getString("dashboard-top-banner-protect-your-data-title")}
</h3>
<p>
{l10n.getString(
"dashboard-top-banner-protect-your-data-description",
{
data_breach_unresolved_num:
bannerData.dataBreachUnresolvedNum,
data_broker_unresolved_num:
bannerData.dataBrokerTotalNum -
bannerData.dataBrokerAutoFixedNum -
bannerData.dataBrokerInProgressNum,
},
)}
</p>
<div className={styles.cta}>
<Button
href={relevantGuidedStep.href}
small
variant="primary"
onPress={() => {
let buttonId = "us_non_premium_yes_scan";
if (contentProps.hasUnresolvedBreaches)
// Plus users will no longer have unresolved scan results,
// as we'll send opt-out requests for them - i.e. there's
// nothing for the user to do. That means that there is no
// more code path that will hit this line: instead this
// combination will result in `UsUserNonPremiumNoExposures`.
// Ideally, we'd narrow down the different permutations to
// remove code that's no longer relevant, but to minimise
// disruptions and potential bugs, we're leaving it for now:
/* c8 ignore next */
buttonId = buttonId.concat("_unresolved_breaches");
if (contentProps.hasUnresolvedBrokers)
buttonId = buttonId.concat("_unresolved_brokers");
recordTelemetry("ctaButton", "click", {
button_id: buttonId,
});
}}
>
{l10n.getString("dashboard-top-banner-protect-your-data-cta")}
</Button>
</div>
</>
);
case "UsUserNonPremiumWithScanRemovalInProgress":
return (
<>
<h3>
{l10n.getString(
"dashboard-top-banner-lets-keep-protecting-title",
)}
</h3>
<p>
{l10n.getString(
"dashboard-top-banner-lets-keep-protecting-description",
{
exposures_unresolved_num:
bannerData.totalDataPointsNum -
bannerData.dataBreachFixedDataPointsNum -
bannerData.dataBrokerAutoFixedDataPointsNum -
bannerData.dataBrokerInProgressDataPointsNum -
bannerData.dataBrokerManuallyResolvedDataPointsNum,
},
)}
</p>
<div className={styles.cta}>
<Button
href={relevantGuidedStep.href}
small
variant="primary"
onPress={() => {
let buttonId = "us_non_premium_yes_scan";
if (contentProps.hasUnresolvedBreaches)
buttonId = buttonId.concat("_unresolved_breaches");
recordTelemetry("ctaButton", "click", {
button_id: buttonId,
});
}}
>
{l10n.getString(
"dashboard-top-banner-lets-keep-protecting-cta",
)}
</Button>
</div>
</>
);
case "UsUserNonPremiumWithScanAllResolved":
return (
<>
<h3>
{l10n.getString(
"dashboard-top-banner-your-data-is-protected-title",
)}
</h3>
<p>
{l10n.getString(
"dashboard-top-banner-your-data-is-protected-all-fixed-description",
{
starting_exposure_total_num: bannerData.totalDataPointsNum,
},
)}
</p>
<div className={styles.cta}>
<UpsellButton
label={l10n.getString(
"dashboard-top-banner-no-exposures-found-cta",
)}
monthlySubscriptionUrl={monthlySubscriptionUrl}
yearlySubscriptionUrl={yearlySubscriptionUrl}
subscriptionBillingAmount={subscriptionBillingAmount}
/>
</div>
</>
);
case "UsUserPremiumOrNonPremiumWithScanUnresolvedExposures":
return (
<>
<h3>
{l10n.getString(
"dashboard-top-banner-lets-keep-protecting-title",
)}
</h3>
<p>
{l10n.getString(
"dashboard-top-banner-lets-keep-protecting-description",
{
exposures_unresolved_num:
bannerData.totalDataPointsNum -
bannerData.dataBreachFixedDataPointsNum -
bannerData.dataBrokerAutoFixedDataPointsNum -
bannerData.dataBrokerInProgressDataPointsNum -
bannerData.dataBrokerManuallyResolvedDataPointsNum,
},
)}
</p>
<div className={styles.cta}>
<Button
href={relevantGuidedStep.href}
small
variant="primary"
onPress={() => {
recordTelemetry("ctaButton", "click", {
button_id: `us_${isPremiumUser ? "" : "non_"}premium${
// Plus users will no longer have unresolved scan results,
// as we'll send opt-out requests for them - i.e. there's
// nothing for the user to do. That means that there is no
// more code path that will hit this line: instead this
// combination will result in
// `UsUserNonPremiumWithScanRemovalInProgress`.
// Ideally, we'd narrow down the different permutations to
// remove code that's no longer relevant, but to minimise
// disruptions and potential bugs, we're leaving it for now:
/* c8 ignore next 3 */
contentProps.hasUnresolvedBreaches
? "_unresolved_breaches"
: ""
}${
contentProps.hasUnresolvedBrokers
? "_unresolved_brokers"
: ""
}`,
});
}}
>
{l10n.getString(
"dashboard-top-banner-lets-keep-protecting-cta",
)}
</Button>
</div>
</>
);
case "UsUserPremiumWithScanNoExposures":
return (
<>
<h3>
{l10n.getString("dashboard-top-banner-no-exposures-found-title")}
</h3>
<p>
{l10n.getString(
"dashboard-top-banner-no-exposures-found-description",
{
data_broker_sites_total_num: CONST_ONEREP_DATA_BROKER_COUNT,
},
)}
</p>
<div className={styles.cta}>
<Button
href="/user/settings"
small
variant="primary"
onPress={() => {
recordTelemetry("ctaButton", "click", {
button_id: "us_premium_yes_scan_no_exposures",
});
}}
>
{l10n.getString("dashboard-top-banner-monitor-more-cta")}
</Button>
</div>
</>
);
case "UsUserPremiumWithScanAllResolved":
return (
<>
<h3>
{l10n.getString(
"dashboard-top-banner-your-data-is-protected-title",
)}
</h3>
<p>
{l10n.getString(
"dashboard-top-banner-your-data-is-protected-description",
{
starting_exposure_total_num: bannerData.totalDataPointsNum,
},
)}
</p>
<div className={styles.cta}>
<Button
onPress={() => {
contentProps.onShowFixed();
recordTelemetry("ctaButton", "click", {
button_id: "us_premium_yes_scan_all_resolved",
});
}}
small
variant="primary"
>
{l10n.getString(
"dashboard-top-banner-your-data-is-protected-cta",
)}
</Button>
</div>
</>
);
case "UsUserScanInProgressNoBreaches":
return (
<>
<h3>
{l10n.getString("dashboard-top-banner-scan-in-progress-title")}
</h3>
<p>
{l10n.getString(
"dashboard-top-banner-scan-in-progress-unresolved-description",
{
unresolved_exposures:
bannerData.totalDataPointsNum -
bannerData.dataBrokerAutoFixedDataPointsNum -
bannerData.dataBreachFixedDataPointsNum -
bannerData.dataBrokerInProgressDataPointsNum -
bannerData.dataBrokerManuallyResolvedDataPointsNum,
},
)}
<br />
<br />
{l10n.getString(
"dashboard-top-banner-scan-in-progress-no-results-info",
)}
</p>
<div className={styles.cta}>
<Button
href="/user/settings"
small
variant="primary"
onPress={() => {
recordTelemetry("ctaButton", "click", {
button_id: `us_${
isPremiumUser ? "" : "non_"
}premium_scan_in_progress_no_breaches`,
});
}}
>
{l10n.getString(
"dashboard-top-banner-scan-in-progress-no-results-cta",
)}
</Button>
</div>
</>
);
case "UsUserScanInProgressUnresolvedBreaches":
return (
<>
<h3>
{l10n.getString("dashboard-top-banner-scan-in-progress-title")}
</h3>
<p>
{l10n.getString(
"dashboard-top-banner-scan-in-progress-unresolved-description",
{
unresolved_exposures:
bannerData.totalDataPointsNum -
bannerData.dataBrokerAutoFixedDataPointsNum -
bannerData.dataBreachFixedDataPointsNum -
bannerData.dataBrokerInProgressDataPointsNum -
bannerData.dataBrokerManuallyResolvedDataPointsNum,
},
)}
<br />
<br />
{l10n.getString(
"dashboard-top-banner-scan-in-progress-fix-now-hint",
)}
</p>
<div className={styles.cta}>
<Button
href={relevantGuidedStep.href}
small
variant="primary"
onPress={() => {
recordTelemetry("ctaButton", "click", {
button_id: `us_${
isPremiumUser ? "" : "non_"
}premium_scan_in_progress_unresolved_breaches`,
});
}}
>
{l10n.getString(
"dashboard-top-banner-scan-in-progress-results-found-cta",
)}
</Button>
</div>
</>
);
case "UsUserScanInProgressResolvedBreaches":
return (
<>
<h3>
{l10n.getString("dashboard-top-banner-scan-in-progress-title")}
</h3>
<p>
{l10n.getString(
"dashboard-top-banner-your-data-scan-in-progress-all-fixed-description",
{
exposures_resolved_num:
bannerData.dataBrokerAutoFixedDataPointsNum +
bannerData.dataBreachFixedDataPointsNum +
bannerData.dataBrokerInProgressDataPointsNum -
bannerData.dataBrokerManuallyResolvedDataPointsNum,
},
)}
<br />
<br />
{l10n.getString(
"dashboard-top-banner-scan-in-progress-no-results-info",
)}
</p>
<div className={styles.cta}>
<Button
href="/user/settings"
small
variant="primary"
onPress={() => {
recordTelemetry("ctaButton", "click", {
button_id: `us_${
isPremiumUser ? "" : "non_"
}premium_scan_in_progress_resolved_breaches`,
});
}}
>
{l10n.getString(
"dashboard-top-banner-scan-in-progress-no-results-cta",
)}
</Button>
</div>
</>
);
default:
// The above conditions should always match one of the possible dashboard states.
console.warn("No matching condition for dashboard state found.");
return null;
}
}