Function UpgradeToPlus

packages/shared/src/components/UpgradeToPlus.tsx:26–87

({
  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 { value: isApiLanding } = useConditionalFeature({
    feature: featurePlusApiLanding,
    shouldEvaluate: !isPlus,
  });
  const ctaCopy = isApiLanding
    ? { full: 'Get API Access', short: 'API access' }
    : { full: 'Level Up with Plus', short: 'Upgrade' };
  const content = isFullCTAText ? ctaCopy.full : ctaCopy.short;
  const defaultColor = isApiLanding ? ButtonColor.Bacon : ButtonColor.Avocado;

  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}
      >
        {iconOnly ? null : content}