refactor: plus page to allow gifting another user

packages/shared/src/components/plus/GiftPlusModal.tsx

@@ -10,6 +10,7 @@ import {
 } from '../typography/Typography';
 import CloseButton from '../CloseButton';
 import { ButtonSize, ButtonVariant } from '../buttons/common';
+import type { AllowedTags, ButtonProps } from '../buttons/Button';
 import { Button } from '../buttons/Button';
 import { PlusTitle } from './PlusTitle';
 import {
@@ -25,48 +26,23 @@ import { RecommendedMention } from '../RecommendedMention';
 import { BaseTooltip } from '../tooltips/BaseTooltip';
 import type { UserShortProfile } from '../../lib/user';
 import useDebounceFn from '../../hooks/useDebounceFn';
-import { ProfileImageSize, ProfilePicture } from '../ProfilePicture';
 import { PlusLabelColor, PlusPlanExtraLabel } from './PlusPlanExtraLabel';
 import { ArrowKey, KeyboardCommand } from '../../lib/element';
-
-interface SelectedUserProps {
-  user: UserShortProfile;
-  onClose: () => void;
-}
-
-const SelectedUser = ({ user, onClose }: SelectedUserProps) => {
-  const { username, name } = user;
-
-  return (
-    <div className="flex w-full max-w-full flex-row items-center gap-2 rounded-10 bg-surface-float p-2">
-      <ProfilePicture user={user} size={ProfileImageSize.Medium} />
-      <span className="flex w-full flex-1 flex-row items-center gap-2 truncate">
-        <Typography bold type={TypographyType.Callout}>
-          {name}
-        </Typography>
-        <Typography
-          type={TypographyType.Footnote}
-          color={TypographyColor.Secondary}
-        >
-          {username}
-        </Typography>
-      </span>
-      <CloseButton type="button" onClick={onClose} size={ButtonSize.XSmall} />
-    </div>
-  );
-};
+import { GiftingSelectedUser } from './GiftingSelectedUser';
 
 interface GiftPlusModalProps extends ModalProps {
   preselected?: UserShortProfile;
+  onSubmit?: (user: UserShortProfile) => void;
 }
 
 export function GiftPlusModalComponent({
   preselected,
+  onSubmit,
   ...props
 }: GiftPlusModalProps): ReactElement {
   const [overlay, setOverlay] = useState<HTMLElement>();
   const { onRequestClose } = props;
-  const { oneTimePayment } = usePaymentContext();
+  const { giftOneYear } = usePaymentContext();
   const [selected, setSelected] = useState(preselected);
   const [index, setIndex] = useState(0);
   const [query, setQuery] = useState('');
@@ -130,6 +106,18 @@ export function GiftPlusModalComponent({
     setQuery('');
   };
 
+  const submitProps: ButtonProps<AllowedTags> = onSubmit
+    ? {
+        onClick: (event: React.MouseEvent) => {
+          onSubmit(selected);
+          onRequestClose(event);
+        },
+      }
+    : {
+        tag: 'a',
+        href: `${plusUrl}?giftToUserId=${selected?.id}`,
+      };
+
   return (
     <Modal
       {...props}
@@ -151,7 +139,10 @@ export function GiftPlusModalComponent({
           Gift daily.dev Plus 🎁
         </Typography>
         {selected ? (
-          <SelectedUser user={selected} onClose={() => setSelected(null)} />
+          <GiftingSelectedUser
+            user={selected}
+            onClose={() => setSelected(null)}
+          />
         ) : (
           <div className="flex flex-col">
             <BaseTooltip
@@ -195,33 +186,32 @@ export function GiftPlusModalComponent({
           </Typography>
           <PlusPlanExtraLabel
             color={PlusLabelColor.Success}
-            label={oneTimePayment.extraLabel}
+            label={giftOneYear?.extraLabel}
             typographyProps={{ color: TypographyColor.StatusSuccess }}
           />
           <Typography type={TypographyType.Body} className="ml-auto mr-1">
-            <strong className="mr-1">{oneTimePayment?.price}</strong>
-            {oneTimePayment?.currencyCode}
+            <strong className="mr-1">{giftOneYear?.price}</strong>
+            {giftOneYear?.currencyCode}
           </Typography>
         </div>
         <Typography type={TypographyType.Callout}>
-          Gift one year of daily.dev Plus for {oneTimePayment?.price}. Once the
+          Gift one year of daily.dev Plus for {giftOneYear?.price}. Once the
           payment is processed, they’ll be notified of your gift. This is a
           one-time purchase, not a recurring subscription.
         </Typography>
         <Button
-          tag="a"
           variant={ButtonVariant.Primary}
-          href={`${plusUrl}?giftToUserId=${selected?.id}`}
           disabled={!selected}
+          {...submitProps}
         >
-          Gift & Pay {oneTimePayment?.price}
+          Gift & Pay {giftOneYear?.price}
         </Button>
       </Modal.Body>
     </Modal>
   );
 }
 
-export function GiftPlusModal(props: ModalProps): ReactElement {
+export function GiftPlusModal(props: GiftPlusModalProps): ReactElement {
   return (
     <PaymentContextProvider>
       <GiftPlusModalComponent {...props} />

packages/shared/src/components/plus/GiftUserContext.tsx

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+import type { UserShortProfile } from '../../lib/user';
+
+interface GiftUserContextData {
+  giftingUser?: UserShortProfile;
+  onUserChange: (user: UserShortProfile) => void;
+}
+export const GiftUserContext = createContext<GiftUserContextData | null>(null);
+
+export const useGiftUserContext = (): GiftUserContextData =>
+  useContext(GiftUserContext);

packages/shared/src/components/plus/GiftingSelectedUser.tsx

@@ -0,0 +1,41 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { ProfileImageSize, ProfilePicture } from '../ProfilePicture';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../typography/Typography';
+import CloseButton from '../CloseButton';
+import { ButtonSize } from '../buttons/common';
+import type { UserShortProfile } from '../../lib/user';
+
+interface GiftingSelectedUserProps {
+  user: UserShortProfile;
+  onClose: () => void;
+}
+
+export function GiftingSelectedUser({
+  user,
+  onClose,
+}: GiftingSelectedUserProps): ReactElement {
+  const { username, name } = user;
+
+  return (
+    <div className="flex w-full max-w-full flex-row items-center gap-2 rounded-10 bg-surface-float p-2">
+      <ProfilePicture user={user} size={ProfileImageSize.Medium} />
+      <span className="flex w-full flex-1 flex-row items-center gap-2 truncate">
+        <Typography bold type={TypographyType.Callout}>
+          {name}
+        </Typography>
+        <Typography
+          type={TypographyType.Footnote}
+          color={TypographyColor.Secondary}
+        >
+          {username}
+        </Typography>
+      </span>
+      <CloseButton type="button" onClick={onClose} size={ButtonSize.XSmall} />
+    </div>
+  );
+}