export function WelcomeToPlusView()

in src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/welcome-to-plus/WelcomeToPlusView.tsx [30:144]
113 lines of code
7 McCabe index (conditional complexity)

export function WelcomeToPlusView(props: Props) {
  const l10n = props.l10n;

  const scanResultsInProgress =
    props.data.latestScanData?.results.filter(
      (result) => !result.manually_resolved && result.status !== "removed",
    ) ?? [];
  const scanResultsInProgressCount = scanResultsInProgress.length;
  const hasRelevantScanResults = scanResultsInProgressCount > 0;
  const summary = getDashboardSummary(
    scanResultsInProgress,
    props.data.subscriberBreaches,
    props.enabledFeatureFlags,
  );
  const dataPointReduction = getDataPointReduction(summary);

  return (
    <FixView
      data={props.data}
      subscriberEmails={props.subscriberEmails}
      nextStep={getNextGuidedStep(
        props.data,
        props.enabledFeatureFlags,
        "Scan",
      )}
      currentSection="data-broker-profiles"
      enabledFeatureFlags={props.enabledFeatureFlags}
    >
      <div className={styles.contentWrapper}>
        <div className={styles.content}>
          <h3>
            {l10n.getString(
              "welcome-to-premium-data-broker-profiles-title-part-one",
            )}
            {hasRelevantScanResults && (
              <>
                <br />
                {l10n.getString(
                  "welcome-to-premium-data-broker-profiles-title-part-two",
                )}
              </>
            )}
          </h3>
          <p>
            {hasRelevantScanResults
              ? l10n.getFragment(
                  "welcome-to-premium-data-broker-profiles-description-part-one",
                  {
                    vars: {
                      profile_total_num: scanResultsInProgressCount,
                      exposure_reduction_percentage: dataPointReduction,
                    },
                    elems: { b: <b /> },
                  },
                )
              : l10n.getString(
                  "welcome-to-premium-data-broker-profiles-zero-state-description-part-one",
                  {
                    data_broker_count: CONST_ONEREP_DATA_BROKER_COUNT,
                  },
                )}
          </p>
          {!hasRelevantScanResults && (
            <p>
              {l10n.getString(
                "welcome-to-premium-data-broker-profiles-zero-state-description-part-two",
              )}
            </p>
          )}
          <p>
            {hasRelevantScanResults
              ? l10n.getString(
                  "welcome-to-premium-data-broker-profiles-description-part-three",
                )
              : l10n.getString(
                  "welcome-to-premium-data-broker-profiles-zero-state-description-part-three",
                )}
          </p>
          <div className={styles.buttonsWrapper}>
            <TelemetryButton
              variant="primary"
              href={
                getNextGuidedStep(props.data, props.enabledFeatureFlags, "Scan")
                  .href
              }
              wide
              event={{
                module: "ctaButton",
                name: "click",
                data: {
                  button_id: "guided_experience_progress",
                },
              }}
            >
              {l10n.getString(
                "welcome-to-premium-data-broker-profiles-cta-label",
              )}
            </TelemetryButton>
          </div>
        </div>
        {hasRelevantScanResults ? (
          <div className={styles.chart}>
            <PercentageChart exposureReduction={dataPointReduction} />
          </div>
        ) : (
          <div
            className={`${styles.illustrationWrapper} ${styles.hideOnMobile}`}
          >
            <Image src={noBreachesIllustration} alt="" />
          </div>
        )}
      </div>
    </FixView>
  );
}