feat: APP-202 buy credits step 2

web-components/src/components/icons/UncheckedIcon.tsx

@@ -1,20 +1,28 @@
-import React from 'react';
 import SvgIcon from '@mui/material/SvgIcon';
 
+import { cn } from '../../utils/styles/cn';
+
 interface IconProps {
  className?: string;
+ disabled?: boolean;
 }
 
-export default function UncheckedIcon({ className }: IconProps): JSX.Element {
+export default function UncheckedIcon({
+ className,
+ disabled,
+}: IconProps): JSX.Element {
  return (
- <SvgIcon viewBox="0 0 20 20" className={className}>
+ <SvgIcon
+ viewBox="0 0 20 20"
+ className={cn(disabled ? 'text-grey-300' : 'text-grey-0', className)}
+ >
  <rect
  x="0.5"
  y="0.5"
  width="19"
  height="19"
  rx="0.5"
- fill="white"
+ fill={'currentColor'}
  stroke="#D2D5D9"
  />
  </SvgIcon>

web-components/src/components/inputs/new/CheckBox/Checkbox.tsx

@@ -22,7 +22,7 @@ const Checkbox = forwardRef<HTMLButtonElement, Props>((props, ref) => {
  {...props}
  ref={ref}
  color="secondary"
- icon={<UncheckedIcon className={classes.check} />}
+ icon={<UncheckedIcon className={classes.check} disabled={disabled} />}
  checkedIcon={
  <CheckedIcon className={classes.check} disabled={disabled} />
  }

web-components/src/components/inputs/new/CheckboxLabel/CheckboxLabel.tsx

@@ -7,6 +7,7 @@ import FormControlLabel, {
 import FormHelperText from '@mui/material/FormHelperText';
 
 import { Theme } from '../../../../theme/muiTheme';
+import { cn } from '../../../../utils/styles/cn';
 import { Subtitle } from '../../../typography';
 import Checkbox from '../CheckBox/Checkbox';
 
@@ -39,8 +40,8 @@ const CheckboxLabel = forwardRef<HTMLButtonElement, CheckboxLabelProps>(
  return (
  <>
  <FormControlLabel
- className={className}
- sx={[{ ml: 0 }, ...(Array.isArray(sx) ? sx : [sx])]}
+ className={cn('ml-0 flex items-start', className)}
+ sx={[...(Array.isArray(sx) ? sx : [sx])]}
  control={
  <Checkbox
  sx={{ p: 0, mr: 3.5 }}

web-components/src/components/inputs/new/InputLabel/InputLabel.styles.ts

@@ -19,7 +19,7 @@ export const useInputLabelStyles = makeStyles<UseStylesParams>()(
  '&.Mui-error': {
  color: theme.palette.primary.contrastText,
  },
- '&::after': {
+ '& > :first-child::after': {
  content: !!optional ? '" (optional)"' : '""',
  fontWeight: 'normal',
  color: theme.palette.info.main,

web-marketplace/package.json

@@ -27,6 +27,8 @@
  "@regen-network/api": "0.6.0",
  "@sentry/react": "^7.53.0",
  "@sentry/tracing": "^7.53.0",
+ "@stripe/react-stripe-js": "^2.7.3",
+ "@stripe/stripe-js": "^4.1.0",
  "@tanstack/react-query": "^4.2.3",
  "@tanstack/react-query-devtools": "^4.18.0",
  "@types/auth0-js": "^9.14.5",

web-marketplace/src/components/molecules/ScrollableCodebox/ScrollableCodebox.stories.tsx

@@ -1,7 +1,7 @@
 import { ScrollableCodebox } from './ScrollableCodebox';
 
 export default {
- title: 'Registry/Molecules/Scrollable Codebox',
+ title: 'Marketplace/Molecules/Scrollable Codebox',
  component: ScrollableCodebox,
 };
 

web-marketplace/src/components/organisms/AccountConnectWalletModal/AccountConnectWalletModal.stories.tsx

@@ -6,7 +6,7 @@ import { getWalletsMock } from './AccountConnectWalletModal.mock';
 import { AccountConnectModalState } from './AccountConnectWalletModal.types';
 
 const meta: Meta<typeof AccountConnectWalletModal> = {
- title: 'Registry/Organisms/AccountConnectWalletModal',
+ title: 'Marketplace/Organisms/AccountConnectWalletModal',
  component: AccountConnectWalletModal,
 };
 export default meta;

web-marketplace/src/components/organisms/BridgeModal/BridgeModal.stories.tsx

@@ -10,6 +10,6 @@ export const bridgeModal = (): JSX.Element => (
 );
 
 export default {
- title: 'Registry/Organisms/Bridge Modal',
+ title: 'Marketplace/Organisms/Bridge Modal',
  component: BridgeModal,
 };

web-marketplace/src/components/organisms/CreateSellOrderModal/CreateSellOrderModal.stories.tsx

@@ -19,6 +19,6 @@ export const createSellOrderModal = (): JSX.Element => (
 );
 
 export default {
- title: 'Registry/Organisms/CreateSellOrderModal',
+ title: 'Marketplace/Organisms/CreateSellOrderModal',
  component: CreateSellOrderModal,
 };

web-marketplace/src/components/organisms/CreditClassForms/CreditClassForm.stories.tsx

@@ -61,6 +61,6 @@ export const creditClassFinished = (): JSX.Element => (
 );
 
 export default {
- title: 'Registry/Organisms/Credit Class Form',
+ title: 'Marketplace/Organisms/Credit Class Form',
  component: CreditClassForm,
 };

web-marketplace/src/components/organisms/CreditRetireForm/CreditRetireForm.stories.tsx

@@ -13,6 +13,6 @@ export const creditRetireForm = (): JSX.Element => (
 );
 
 export default {
- title: 'Registry/Organisms/Credit Send Form',
+ title: 'Marketplace/Organisms/Credit Send Form',
  component: CreditRetireForm,
 };

web-marketplace/src/components/organisms/CreditSendForm/CreditSendForm.stories.tsx

@@ -14,6 +14,6 @@ export const creditSendForm = (): JSX.Element => (
 );
 
 export default {
- title: 'Registry/Organisms/Credit Send Form',
+ title: 'Marketplace/Organisms/Credit Send Form',
  component: CreditSendForm,
 };

web-marketplace/src/components/organisms/EditProfileForm/EditProfileForm.stories.tsx

@@ -5,7 +5,7 @@ import { EditProfileForm } from './EditProfileForm';
 import { EditProfileFormActionBar } from './EditProfileForm.ActionBar';
 
 export default {
- title: 'Registry/Organisms/EditProfileForm',
+ title: 'Marketplace/Organisms/EditProfileForm',
  component: EditProfileForm,
 } as ComponentMeta<typeof EditProfileForm>;
 

web-marketplace/src/components/organisms/LoginModal/LoginModal.stories.tsx

@@ -6,7 +6,7 @@ import { socialProvidersMock, wallets } from './LoginModal.mock';
 import { LoginModalState } from './LoginModal.types';
 
 const meta: Meta<typeof LoginModal> = {
- title: 'Registry/Organisms/LoginModal',
+ title: 'Marketplace/Organisms/LoginModal',
  component: LoginModal,
 };
 export default meta;

web-marketplace/src/components/organisms/MediaForm/MediaForm.stories.tsx

@@ -2,7 +2,7 @@ import { MediaForm } from './MediaForm';
 import { MediaFormSchemaType } from './MediaForm.schema';
 
 export default {
- title: 'Registry/Organisms/MediaForm',
+ title: 'Marketplace/Organisms/MediaForm',
  component: MediaForm,
 };
 

web-marketplace/src/components/organisms/MetadataForm/MetadataForm.stories.tsx

@@ -1,7 +1,7 @@
 import { MetadataForm } from './MetadataForm';
 
 export default {
- title: 'Registry/Organisms/Metadata Form',
+ title: 'Marketplace/Organisms/Metadata Form',
  component: MetadataForm,
 };
 

web-marketplace/src/components/organisms/Modals/CreditRetireModal/CreditRetireModal.stories.tsx

@@ -14,6 +14,6 @@ export const creditSendModal = (): JSX.Element => (
 );
 
 export default {
- title: 'Registry/Organisms/Credit Retire Modal',
+ title: 'Marketplace/Organisms/Credit Retire Modal',
  component: CreditRetireModal,
 };

web-marketplace/src/components/organisms/Modals/CreditSendModal/CreditSendModal.stories.tsx

@@ -15,6 +15,6 @@ export const creditSendModal = (): JSX.Element => (
 );
 
 export default {
- title: 'Registry/Organisms/Credit Send Modal',
+ title: 'Marketplace/Organisms/Credit Send Modal',
  component: CreditSendModal,
 };

web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.CardInfo.tsx

@@ -0,0 +1,48 @@
+import { useEffect } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { PaymentElement } from '@stripe/react-stripe-js';
+
+import CheckboxLabel from 'web-components/src/components/inputs/new/CheckboxLabel/CheckboxLabel';
+import { Body } from 'web-components/src/components/typography';
+
+import { paymentElementOptions } from './PaymentInfoForm.constants';
+import { PaymentInfoFormSchemaType } from './PaymentInfoForm.schema';
+
+type CardInfoProps = {
+ accountId?: string;
+ className?: string;
+};
+export const CardInfo = ({ accountId, className }: CardInfoProps) => {
+ const ctx = useFormContext<PaymentInfoFormSchemaType>();
+ const { register, control, setValue } = ctx;
+
+ const createAccount = useWatch({
+ control: control,
+ name: 'createAccount',
+ });
+ const savePaymentMethod = useWatch({
+ control: control,
+ name: 'savePaymentMethod',
+ });
+
+ useEffect(() => {
+ setValue('savePaymentMethod', createAccount);
+ }, [createAccount, setValue]);
+
+ return (
+ <div className={className}>
+ <PaymentElement id="payment-element" options={paymentElementOptions} />
+ <CheckboxLabel
+ className="pt-30"
+ checked={savePaymentMethod}
+ disabled={!createAccount && !accountId}
+ label={
+ <Body size="sm" className="text-grey-700">
+ Save my credit card info for next time
+ </Body>
+ }
+ {...register('savePaymentMethod')}
+ />
+ </div>
+ );
+};

web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.CustomerInfo.tsx

@@ -0,0 +1,104 @@
+import { useFormContext, useWatch } from 'react-hook-form';
+
+// import { msg, Trans } from '@lingui/macro';
+// import { useLingui } from '@lingui/react';
+import OutlinedButton from 'web-components/src/components/buttons/OutlinedButton';
+import Card from 'web-components/src/components/cards/Card';
+import CheckboxLabel from 'web-components/src/components/inputs/new/CheckboxLabel/CheckboxLabel';
+import TextField from 'web-components/src/components/inputs/new/TextField/TextField';
+import { Body, Title } from 'web-components/src/components/typography';
+
+import { Wallet } from 'lib/wallet/wallet';
+
+import { PaymentInfoFormSchemaType } from './PaymentInfoForm.schema';
+import { PaymentOptionsType } from './PaymentInfoForm.types';
+
+export type CustomerInfoProps = {
+ paymentOption: PaymentOptionsType;
+ wallet?: Wallet;
+ accountId?: string;
+ accountEmail?: string;
+ accountName?: string;
+ login: () => void;
+ retiring: boolean;
+};
+
+export const CustomerInfo = ({
+ paymentOption,
+ wallet,
+ accountEmail,
+ accountName,
+ accountId,
+ retiring,
+ login,
+}: CustomerInfoProps) => {
+ // const { _ } = useLingui();
+ const ctx = useFormContext<PaymentInfoFormSchemaType>();
+ const { register, formState, control } = ctx;
+ const { errors } = formState;
+
+ const createAccount = useWatch({
+ control: control,
+ name: 'createAccount',
+ });
+
+ return (
+ <Card className="py-30 px-20 sm:py-50 sm:px-40 border-grey-300">
+ <div className="flex justify-between flex-wrap gap-20">
+ <Title variant="h6">Customer info</Title>
+ {!accountId && !wallet && (
+ <OutlinedButton onClick={login} className="text-xs py-[9px] px-20">
+ log in for faster checkout
+ </OutlinedButton>
+ )}
+ </div>
+ {retiring && (
+ <TextField
+ label="Your name"
+ description={`This name will appear on the retirement certificate unless you choose to retire anonymously in the next step. It is also your user profile name.`}
+ {...register('name')}
+ error={!!errors['name']}
+ helperText={errors['name']?.message}
+ disabled={!!accountName}
+ />
+ )}
+ <TextField
+ className={!accountId && !wallet ? 'mb-30' : ''}
+ label="Your email"
+ description={
+ !!wallet && !accountEmail ? (
+ <>
+ Input an email address to receive a receipt of your purchase.
+ <i>
+ Take note: we will email you a prompt to associate this email
+ with your account for easier future access. This is entirely
+ optional.
+ </i>
+ </>
+ ) : paymentOption === 'card' ? (
+ `We need an email address to send you a receipt of your purchase.`
+ ) : (
+ `We will send your receipt to the email address below, which is already linked to your account.`
+ )
+ }
+ {...register('email')}
+ error={!!errors['email']}
+ helperText={errors['email']?.message}
+ disabled={!!accountEmail}
+ optional={!!wallet}
+ />
+ {!accountId && !wallet && (
+ <CheckboxLabel
+ checked={createAccount}
+ label={
+ <Body size="sm" className="text-grey-700">
+ Yes, please create an account for me so I can easily see my
+ purchase details and retirement certificate when I log in
+ </Body>
+ }
+ {...register('createAccount')}
+ />
+ )}
+ </Card>
+ );
+};