Function PlusMobile

packages/shared/src/components/plus/PlusMobile.tsx:26–90

({
  shouldShowPlusHeader,
}: CommonPlusPageProps)

);

export const PlusMobile = ({
  shouldShowPlusHeader,
}: CommonPlusPageProps): ReactElement => {
  const router = useRouter();
  const { giftToUser } = useGiftUserContext();
  const { productOptions, isOrganization } = usePaymentContext();
  const isApiLanding = useFeature(featurePlusApiLanding);
  const [selectedOption, setSelectedOption] = useState<string | null>(null);

  const selectionChange: OpenCheckoutFn = useCallback(({ priceId }) => {
    setSelectedOption(priceId);
  }, []);

  const onContinue = useCallback(() => {
    const query: Record<string, string> = {};
    if (selectedOption) {
      query.pid = selectedOption;
    }
    if (giftToUser?.id) {
      query.gift = giftToUser.id;
    }
    const params = objectToQueryParams(query);

    router.push(`${plusUrl}/payment?${params}`);
  }, [router, giftToUser, selectedOption]);

  return (
    <div
      className="flex flex-col p-6"
      ref={(element) => {
        if (!element) {
          return;
        }

        if (productOptions?.[0]?.priceId && !selectedOption) {
          setSelectedOption(productOptions[0].priceId);
        }
      }}
    >
      {!giftToUser && (
        <PlusProductToggle
          options={[
            { priceType: PurchaseType.Plus, label: 'Personal' },
            {
              priceType: PurchaseType.Organization,
              label: 'Team',
            },
          ]}
          onSelect={() => setSelectedOption(null)}
          className="self-start"
        />
      )}
      <PlusInfo
        productOptions={productOptions ?? []}
        selectedOption={selectedOption}
        onChange={selectionChange}
        onContinue={onContinue}
        shouldShowPlusHeader={shouldShowPlusHeader}