function UpsellDialogContent()

in src/app/components/client/toolbar/UpsellDialog.tsx [92:246]

• 147 lines of code
• 8 McCabe index (conditional complexity)

function UpsellDialogContent({
  monthlySubscriptionUrl,
  yearlySubscriptionUrl,
  subscriptionBillingAmount,
}: UpsellDialogContentProps) {
  const l10n = useL10n();
  const recordTelemetry = useTelemetry();
  const [billingPeriod, setBillingPeriod] = useState<BillingPeriod>("yearly");

  // format subscription urls
  const monthlySubscriptionUrlWithAttributions = monthlySubscriptionUrl
    ? modifyAttributionsForUrl(
        monthlySubscriptionUrl,
        {
          form_type: "button",
          entrypoint:
            "monitor.mozilla.org-monitor-in-product-navigation-upsell",
        },
        {
          utm_source: "product",
          utm_medium: "monitor",
          utm_campaign: "navigation-upsell",
        },
      )
    : monthlySubscriptionUrl;
  const yearlySubscriptionUrlWithAttributions = yearlySubscriptionUrl
    ? modifyAttributionsForUrl(
        yearlySubscriptionUrl,
        {
          form_type: "button",
          entrypoint:
            "monitor.mozilla.org-monitor-in-product-navigation-upsell",
        },
        {
          utm_source: "product",
          utm_medium: "monitor",
          utm_campaign: "navigation-upsell",
        },
      )
    : yearlySubscriptionUrl;

  const isMonthly = billingPeriod === "monthly";
  const tabsData = [
    {
      name: l10n.getString(
        "fix-flow-data-broker-profiles-automatic-remove-features-select-plan-toggle-yearly",
      ),
      key: "yearly",
      content: (
        <PremiumPricingLabel
          subscriptionBillingAmount={subscriptionBillingAmount}
        />
      ),
    },
    {
      name: l10n.getString(
        "fix-flow-data-broker-profiles-automatic-remove-features-select-plan-toggle-monthly",
      ),
      key: "monthly",
      content: (
        <PremiumPricingLabel
          subscriptionBillingAmount={subscriptionBillingAmount}
          isMonthly
        />
      ),
    },
  ];

  return (
    <div className={styles.modalContent}>
      <div className={styles.priceSection}>
        <BillingPeriodToggle
          onChange={(selectedKey) => {
            setBillingPeriod(selectedKey);
            recordTelemetry("button", "click", {
              button_id:
                selectedKey === "yearly"
                  ? "selected_yearly_plan"
                  : "selected_monthly_plan",
            });
            return setBillingPeriod(selectedKey);
          }}
        />
        {tabsData.map((tab) => {
          if (tab.key === billingPeriod) {
            return <div key={tab.key}>{tab.content}</div>;
          }
        })}
      </div>
      <dl className={styles.list}>
        <dt>
          {l10n.getString(
            "fix-flow-data-broker-profiles-automatic-remove-features-headline",
          )}
        </dt>
        <dd>
          {l10n.getString(
            "fix-flow-data-broker-profiles-automatic-remove-features-monthly-scan",
            {
              data_broker_count: CONST_ONEREP_DATA_BROKER_COUNT,
            },
          )}
        </dd>
        <dd>
          {l10n.getString(
            "fix-flow-data-broker-profiles-automatic-remove-features-remove-personal-info",
          )}
        </dd>
        <dd>
          {l10n.getString(
            "fix-flow-data-broker-profiles-automatic-remove-features-guided-experience",
          )}
        </dd>
        <dd>
          {l10n.getString(
            "fix-flow-data-broker-profiles-automatic-remove-features-continuous-monitoring",
          )}
        </dd>
        <dd>
          {l10n.getString(
            "fix-flow-data-broker-profiles-automatic-remove-features-breach-alerts",
          )}
        </dd>
      </dl>
      <Button
        className={styles.productCta}
        href={
          isMonthly
            ? monthlySubscriptionUrlWithAttributions
            : yearlySubscriptionUrlWithAttributions
        }
        onPress={() => {
          // Note: This doesn't currently work; the event is now never sent to
          //       the back-end because the page unloads before we can do so.
          //       This will be dealt with in upstream Glean:
          //       https://matrix.to/#/!SCdsJdSTaQHjzEVrAE:mozilla.org/$muLULIgsOMaLwe3HR6HI_oJbMkyD5gZBoRN3GmDL8Ko
          recordTelemetry("upgradeIntent", "click", {
            button_id: isMonthly
              ? "intent_to_purchase_monthly_plan_nav_modal"
              : "intent_to_purchase_yearly_plan_nav_modal",
          });
        }}
        variant="primary"
      >
        {isMonthly
          ? l10n.getString(
              "fix-flow-data-broker-profiles-automatic-remove-features-select-plan-monthly-button",
            )
          : l10n.getString(
              "fix-flow-data-broker-profiles-automatic-remove-features-select-plan-yearly-button",
            )}
      </Button>
    </div>
  );
}