Function UpgradeToPlus

packages/shared/src/components/UpgradeToPlus.tsx:27–91

({
  className,
  color,
  size,
  iconOnly = false,
  target,
  variant,
  ...attrs
}: Props)

} & WithClassNameProps;

export const UpgradeToPlus = ({
  className,
  color,
  size,
  iconOnly = false,
  target,
  variant,
  ...attrs
}: Props): ReactElement | null => {
  const { isLoggedIn, showLogin } = useAuthContext();
  const isLaptop = useViewSize(ViewSize.Laptop);
  const isLaptopXL = useViewSize(ViewSize.LaptopXL);
  const isFullCTAText = !isLaptop || isLaptopXL;
  const { isPlus, logSubscriptionEvent } = usePlusSubscription();
  const { isActive: isSaleActive } = usePlusSale();
  const ctaCopy = { full: 'Get API Access', short: 'API access' };
  const content = isFullCTAText ? ctaCopy.full : ctaCopy.short;
  const showSaleLabel = isSaleActive && !iconOnly;
  const defaultColor = ButtonColor.Bacon;

  const onClick = useCallback(
    (e: React.MouseEvent) => {
      if (!isLoggedIn) {
        e.preventDefault();
        showLogin({ trigger: AuthTriggers.Plus });
        return;
      }

      logSubscriptionEvent({
        event_name: LogEvent.UpgradeSubscription,
        target_id: target,
      });
    },
    [isLoggedIn, logSubscriptionEvent, showLogin, target],
  );

  if (isPlus) {
    return null;
  }

  return (
    <Link passHref href={plusUrl}>
      <Button
        tag="a"
        className={classNames(!iconOnly && 'flex-1', className)}
        icon={<DevPlusIcon />}
        size={size}
        color={defaultColor}
        variant={ButtonVariant.Primary}
        onClick={onClick}
        {...(variant && { variant, color })}
        {...attrs}
      >
        {showSaleLabel ? (
          <>
            <span className="min-w-0 truncate">{content}</span>
            <PlusSaleLabel />
          </>