feat: credit system

packages/shared/package.json

@@ -103,7 +103,7 @@
     "@growthbook/growthbook": "https://gitpkg.now.sh/dailydotdev/growthbook/packages/sdk-js?e354fcf41b2b3f67590294a0e2cdfb56044d7a1e",
     "@growthbook/growthbook-react": "^0.17.0",
     "@marsidev/react-turnstile": "^1.1.0",
-    "@paddle/paddle-js": "^1.3.2",
+    "@paddle/paddle-js": "1.4.0",
     "@tippyjs/react": "^4.2.6",
     "check-password-strength": "^2.0.10",
     "fetch-event-stream": "^0.1.5",

packages/shared/src/components/ProfilePicture.tsx

@@ -23,7 +23,7 @@ export enum ProfileImageSize {
 }
 
 type ProfileImageRoundSize = ProfileImageSize | 'full';
-type UserImageProps = Pick<PublicProfile, 'image'> &
+export type UserImageProps = Pick<PublicProfile, 'image'> &
   Partial<Pick<PublicProfile, 'id' | 'username' | 'name'>>;
 
 export interface ProfilePictureProps

packages/shared/src/components/award/AwardButton.tsx

@@ -0,0 +1,89 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import type { ButtonProps } from '../buttons/Button';
+import {
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonVariant,
+} from '../buttons/Button';
+import { MedalBadgeIcon } from '../icons';
+import { SimpleTooltip } from '../tooltips';
+import { AuthTriggers } from '../../lib/auth';
+import { LazyModal } from '../modals/common/types';
+import { useAuthContext } from '../../contexts/AuthContext';
+import { useLazyModal } from '../../hooks/useLazyModal';
+import type {
+  AwardEntity,
+  AwardTypes,
+} from '../../contexts/GiveAwardModalContext';
+import { useRequestProtocol } from '../../hooks/useRequestProtocol';
+import { getCompanionWrapper } from '../../lib/extension';
+import type { Post } from '../../graphql/posts';
+
+type AwardButtonProps = {
+  appendTo?: 'parent' | Element | ((ref: Element) => Element);
+  type: AwardTypes;
+  className?: string;
+  entity: AwardEntity;
+  post?: Post;
+} & Pick<ButtonProps<'button'>, 'pressed' | 'variant'>;
+export const AwardButton = ({
+  appendTo: appendToProps,
+  type,
+  className,
+  entity,
+  pressed,
+  variant = ButtonVariant.Tertiary,
+  post,
+}: AwardButtonProps): ReactElement => {
+  const { isCompanion } = useRequestProtocol();
+  const { user, showLogin } = useAuthContext();
+  const { openModal } = useLazyModal();
+
+  const openGiveAwardModal = () => {
+    if (!user) {
+      return showLogin({ trigger: AuthTriggers.GiveAward });
+    }
+
+    return openModal({
+      type: LazyModal.GiveAward,
+      props: {
+        type,
+        entity,
+        post,
+      },
+    });
+  };
+
+  if (user && entity.receiver?.id === user.id) {
+    return null;
+  }
+
+  const defaultAppendTo = isCompanion ? getCompanionWrapper : 'parent';
+  const appendTo = appendToProps || defaultAppendTo;
+
+  return (
+    <SimpleTooltip
+      content={
+        pressed
+          ? `You already awarded this ${type.toLowerCase()}!`
+          : 'Award this user'
+      }
+      appendTo={appendTo}
+    >
+      <div>
+        <Button
+          pressed={pressed}
+          size={ButtonSize.Small}
+          icon={<MedalBadgeIcon secondary />}
+          className={classNames(className, pressed && 'pointer-events-none')}
+          variant={variant}
+          color={ButtonColor.Cabbage}
+          onClick={openGiveAwardModal}
+        />
+      </div>
+    </SimpleTooltip>
+  );
+};

packages/shared/src/components/comments/CommentActionButtons.tsx

@@ -52,6 +52,12 @@ import { ContentPreferenceType } from '../../graphql/contentPreference';
 import { isFollowingContent } from '../../hooks/contentPreference/types';
 import { useIsSpecialUser } from '../../hooks/auth/useIsSpecialUser';
 import { GiftIcon } from '../icons/gift';
+import { AwardButton } from '../award/AwardButton';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../typography/Typography';
 
 export interface CommentActionProps {
   onComment: (comment: Comment, parentId: string | null) => void;
@@ -350,6 +356,29 @@ export default function CommentActionButtons({
           color={ButtonColor.BlueCheese}
         />
       </SimpleTooltip>
+      <AwardButton
+        appendTo={appendTo}
+        type="COMMENT"
+        entity={{
+          id: comment.id,
+          receiver: comment.author,
+          numAwards: comment.numAwards,
+        }}
+        pressed={!!comment.userState?.awarded}
+        post={post}
+      />
+      {!!comment.numAwards && (
+        <Typography
+          className="mr-3"
+          type={TypographyType.Callout}
+          color={TypographyColor.Tertiary}
+          bold
+        >
+          {/* TODO feat/transactions show most expensive award image next to count */}
+          {largeNumberFormat(comment.numAwards)} Award
+          {comment.numAwards > 1 ? 's' : ''}
+        </Typography>
+      )}
       <SimpleTooltip content="Share comment" appendTo={appendTo}>
         <Button
           size={ButtonSize.Small}

packages/shared/src/components/comments/CommentContainer.tsx

@@ -21,6 +21,7 @@ import { VerifiedCompanyUserBadge } from '../VerifiedCompanyUserBadge';
 import { Separator } from '../cards/common/common';
 import { PlusUserBadge } from '../PlusUserBadge';
 import { ProfileImageSize } from '../ProfilePicture';
+import { Image } from '../image/Image';
 
 interface ClassName extends CommentClassName {
   content?: string;
@@ -68,6 +69,7 @@ export default function CommentContainer({
       ref={isCommentReferenced ? commentRef : null}
       className={classNames(
         'flex flex-col rounded-16 p-4 hover:bg-surface-hover focus:outline',
+        comment.userState?.awarded && 'bg-overlay-float-onion',
         isCommentReferenced
           ? 'border border-accent-cabbage-default'
           : 'border-border-subtlest-tertiary',
@@ -157,6 +159,15 @@ export default function CommentContainer({
         />
         {actions}
       </div>
+      {!!comment.award && (
+        <div className="absolute right-3 top-3 flex size-7 items-center justify-center rounded-10 bg-surface-float">
+          <Image
+            src={comment.award.image}
+            alt={comment.award.name}
+            className="size-4"
+          />
+        </div>
+      )}
     </article>
   );
 }

packages/shared/src/components/cores/BuyCore.tsx

@@ -0,0 +1,68 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { LogStartBuyingCreditsProps } from '../../types';
+import { webappUrl } from '../../lib/constants';
+import type { Origin } from '../../lib/log';
+import { IconSize } from '../Icon';
+import { CoinIcon } from '../icons';
+import {
+  Typography,
+  TypographyType,
+  TypographyColor,
+} from '../typography/Typography';
+import { formatCurrency } from '../../lib/utils';
+import Link from '../utilities/Link';
+import { getPathnameWithQuery } from '../../lib';
+import { useViewSize, ViewSize } from '../../hooks';
+
+type BuyCoreProps = {
+  onBuyCoresClick: (props: LogStartBuyingCreditsProps) => void;
+  amount: number;
+  price?: number;
+  origin: Origin;
+  pid?: string;
+};
+
+export const BuyCore = ({
+  onBuyCoresClick,
+  amount,
+  price,
+  origin,
+  pid,
+}: BuyCoreProps): ReactElement => {
+  const isMobile = useViewSize(ViewSize.MobileL);
+  const params = new URLSearchParams();
+  if (pid) {
+    params.append('pid', pid);
+  }
+  const href = getPathnameWithQuery(
+    `${webappUrl}cores${isMobile ? '/payment' : ''}`,
+    params,
+  );
+
+  return (
+    <Link href={href}>
+      <a
+        href={href}
+        className="flex flex-1 flex-col items-center rounded-14 bg-surface-float p-2"
+        onClick={() => onBuyCoresClick({ amount, origin })}
+      >
+        <CoinIcon
+          size={IconSize.XLarge}
+          className="mb-1 text-accent-bun-default"
+        />
+        <Typography type={TypographyType.Title3} bold>
+          {amount}
+        </Typography>
+        <Typography
+          type={TypographyType.Caption2}
+          color={TypographyColor.Tertiary}
+        >
+          {typeof price !== 'undefined'
+            ? formatCurrency(price, { currency: 'USD' })
+            : '~'}
+        </Typography>
+      </a>
+    </Link>
+  );
+};

packages/shared/src/components/cores/CoreAmountNeeded.tsx

@@ -0,0 +1,52 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../typography/Typography';
+import { useBuyCoresContext } from '../../contexts/BuyCoresContext';
+
+export const CoreAmountNeeded = (): ReactElement => {
+  const { amountNeeded, selectedProduct } = useBuyCoresContext();
+
+  if (!amountNeeded || !selectedProduct) {
+    return (
+      <Typography
+        className="w-full flex-1"
+        type={TypographyType.Callout}
+        color={TypographyColor.Secondary}
+      >
+        Choose how many Cores to buy.
+      </Typography>
+    );
+  }
+
+  return (
+    <>
+      <Typography
+        className="w-full flex-1"
+        type={TypographyType.Callout}
+        color={TypographyColor.Secondary}
+      >
+        <Typography
+          tag={TypographyTag.Span}
+          color={TypographyColor.Primary}
+          bold
+        >
+          {amountNeeded} Cores
+        </Typography>{' '}
+        will be used to give the Award. The remaining{' '}
+        <Typography
+          tag={TypographyTag.Span}
+          color={TypographyColor.Primary}
+          bold
+        >
+          {selectedProduct.value - amountNeeded} Cores
+        </Typography>{' '}
+        will be added to your balance.
+      </Typography>
+    </>
+  );
+};

packages/shared/src/components/cores/CoreFAQ.tsx

@@ -0,0 +1,83 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { useId } from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../typography/Typography';
+import { Accordion } from '../accordion';
+import { anchorDefaultRel } from '../../lib/strings';
+import { feedback } from '../../lib/constants';
+import { plusFAQItems } from '../plus/common';
+
+interface FAQ {
+  question: string;
+  answer: ReactNode;
+}
+
+const FAQItem = ({ item }: { item: FAQ }): ReactElement => (
+  <div className="rounded-10 bg-surface-float px-6 py-4">
+    <Accordion
+      title={
+        <Typography
+          bold
+          color={TypographyColor.Primary}
+          tag={TypographyTag.Span}
+        >
+          {item.question}
+        </Typography>
+      }
+    >
+      <div className="text-text-tertiary typo-callout">{item.answer}</div>
+    </Accordion>
+  </div>
+);
+
+export const CoreFAQ = (): ReactElement => {
+  const id = useId();
+  const titleId = `${id}-title`;
+  const items = plusFAQItems;
+  return (
+    <section aria-labelledby={titleId} className="my-10">
+      <Typography
+        bold
+        className="mb-10 text-center"
+        id={titleId}
+        tag={TypographyTag.H2}
+        type={TypographyType.Title3}
+      >
+        Frequently asked questions
+      </Typography>
+      <div className="mx-auto flex max-w-3xl flex-col gap-4">
+        {items.map((item) => (
+          <FAQItem key={item.question} item={item} />
+        ))}
+      </div>
+      <Typography
+        className="mt-10 text-center"
+        color={TypographyColor.Tertiary}
+        type={TypographyType.Callout}
+      >
+        For technical or product related questions{' '}
+        <a
+          className="underline"
+          href={feedback}
+          target="_blank"
+          rel={anchorDefaultRel}
+        >
+          click here
+        </a>{' '}
+        or email us at{' '}
+        <a
+          className="underline"
+          href="mailto:[email protected]?subject=I have a question about Plus membership"
+          target="_blank"
+          rel={anchorDefaultRel}
+        >
+          [email protected]
+        </a>
+      </Typography>
+    </section>
+  );
+};