function UpsellToggleButton()

in src/app/components/client/toolbar/UpsellBadge.tsx [84:161]
63 lines of code
6 McCabe index (conditional complexity)

function UpsellToggleButton(props: UpsellToggleButtonProps) {
  const l10n = useL10n();
  const ref = useRef<HTMLButtonElement>(null);
  const state = useToggleState({
    ...props,
    isSelected: props.hasPremium,
  });
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const dialogState = useOverlayTriggerState({
    defaultOpen: props.autoOpenUpsellDialog,
    onOpenChange(isOpen) {
      // Remove `dialog` from URLSearchParams on closing the upsell dialog
      // after it has been opened by linking to it.
      if (!isOpen && props.autoOpenUpsellDialog) {
        const nextSearchParams = new URLSearchParams(searchParams.toString());
        nextSearchParams.delete("dialog");
        const updatedPathname = `${pathname}?${nextSearchParams.toString()}`;
        // Directly interacting with the history API is recommended by Next.js to
        // avoid re-rendering on the server:
        // See https://github.com/vercel/next.js/discussions/48110#discussioncomment-7563979.
        window.history.replaceState(null, "", updatedPathname);
      }
    },
  });
  const { triggerProps, overlayProps } = useOverlayTrigger(
    { type: "dialog" },
    dialogState,
  );
  const { buttonProps } = useToggleButton(
    {
      ...triggerProps,
      isDisabled: state.isSelected,
    },
    state,
    ref,
  );
  const scanDateFormatter = new Intl.DateTimeFormat(getLocale(l10n), {
    dateStyle: "medium",
  });

  return (
    <>
      <div className={styles.upsellWrapper}>
        <button
          {...buttonProps}
          className={`${styles.upsellBadge} ${
            state.isSelected ? styles.isSelected : ""
          }`}
          ref={ref}
        >
          {state.isSelected
            ? l10n.getString("plus-indicator-label-active")
            : l10n.getString("plus-indicator-label-inactive")}
          <span className={styles.toggleIndicator} />
        </button>
        {props.experimentData?.["last-scan-date"].enabled &&
          props.lastScanDate !== null && (
            <span className={styles.lastScanIndicator}>
              <Image src={LastScanIcon} alt="" width={31} height={25} />
              <b>{l10n.getString("plus-indicator-scan-date-label")}</b>&nbsp;
              {scanDateFormatter.format(props.lastScanDate)}
            </span>
          )}
      </div>
      {dialogState.isOpen && (
        <UpsellDialog
          {...overlayProps}
          state={dialogState}
          monthlySubscriptionUrl={props.monthlySubscriptionUrl}
          yearlySubscriptionUrl={props.yearlySubscriptionUrl}
          subscriptionBillingAmount={props.subscriptionBillingAmount}
        />
      )}
    </>
  );
}