Function PlusInfo

packages/shared/src/components/plus/PlusInfo.tsx:131–323

({
  productOptions,
  selectedOption,
  onChange,
  onContinue,
  shouldShowPlusHeader = true,
  showPlusList = true,
  showDailyDevLogo = false,
  showGiftButton = true,
  showTrustReviews = true,
  title,
  description,
  subtitle,
  continueEnabled = true,
  isContinueLoading = false,
}: PlusInfoProps & CommonPlusPageProps)

};

export const PlusInfo = ({
  productOptions,
  selectedOption,
  onChange,
  onContinue,
  shouldShowPlusHeader = true,
  showPlusList = true,
  showDailyDevLogo = false,
  showGiftButton = true,
  showTrustReviews = true,
  title,
  description,
  subtitle,
  continueEnabled = true,
  isContinueLoading = false,
}: PlusInfoProps & CommonPlusPageProps): ReactElement => {
  const router = useRouter();
  const { giftOneYear, isOrganization, checkoutItemsLoading } =
    usePaymentContext();
  const { openModal } = useLazyModal();
  const { logSubscriptionEvent } = usePlusSubscription();
  const { giftToUser } = useGiftUserContext();

  const [itemQuantity, setItemQuantity] = useState<number>(1);

  const plusType = getPlusType({
    isGift: !!giftToUser,
    isOrganization,
  });
  const defaultCopy = plusInfoCopyApi[plusType];
  const titleCopy = title || defaultCopy.title;
  const descriptionCopy = description || defaultCopy.description;
  const subtitleCopy = subtitle || defaultCopy.subtitle;

  const isOnboarding = router.pathname.startsWith('/onboarding');
  const showBuyAsAGiftButton =
    !giftToUser && showGiftButton && !!giftOneYear && !isOnboarding;
  let plusListContent: ReactElement;
  if (isOrganization) {
    plusListContent = <PlusList items={plusOrganizationFeatureList} />;
  } else if (plusType === PlusType.Self) {
    plusListContent = <PlusList items={plusFeatureListApiFirst} />;
  } else {
    plusListContent = <PlusList />;
  }

  return (
    <>
      {shouldShowPlusHeader && (
        <div className="mb-6 flex items-center">
          {showDailyDevLogo && <Logo logoClassName={{ container: 'h-5' }} />}
        </div>
      )}
      <Typography
        tag={TypographyTag.H1}
        color={TypographyColor.Primary}
        type={TypographyType.LargeTitle}
        className="mb-2"