feat: APP-204 buy credits (#2477)

web-components/src/components/PrefinanceTag/PrefinanceTag.stories.tsx

@@ -18,4 +18,5 @@ Default.args = {
  root: '',
  label: '',
  },
+ bodyTexts: { prefinance: 'prefinance' },
 };

web-components/src/components/PrefinanceTag/PrefinanceTag.tsx

@@ -15,7 +15,7 @@ export const PrefinanceTag = ({
  height: '19',
  },
 }: {
- bodyTexts: ProjectCardBodyTextsMapping;
+ bodyTexts: Pick<ProjectCardBodyTextsMapping, 'prefinance'>;
  classNames?: { root?: string; label?: string };
  iconSize?: {
  width: string;

web-components/src/components/SupCurrencyAndAmount/SupCurrencyAndAmount.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { CURRENCIES } from '../DenomIconWithCurrency/DenomIconWithCurrency.constants';
 import { SupCurrencyAndAmount } from './SupCurrencyAndAmount';
 
 export default {
@@ -16,5 +15,5 @@ export const Default: Story = {
 
 Default.args = {
  price: 5,
- currencyCode: CURRENCIES.usd,
+ currencyCode: 'usd',
 };

web-components/src/components/SupCurrencyAndAmount/SupCurrencyAndAmount.test.tsx

@@ -1,11 +1,10 @@
 import { render } from '@testing-library/react';
 import { SupCurrencyAndAmount } from 'web-components/src/components/SupCurrencyAndAmount/SupCurrencyAndAmount';
-
-import { CURRENCIES } from '../DenomIconWithCurrency/DenomIconWithCurrency.constants';
+import { USD_DENOM } from 'web-marketplace/src/config/allowedBaseDenoms';
 
 describe('SupCurrencyAndAmount', () => {
  it('renders the currency symbol and amount', () => {
- const currency = CURRENCIES.usd;
+ const currency = USD_DENOM;
  const amount = '100.00';
 
  const { getByText } = render(

web-components/src/components/fixed-footer/SaveFooter.tsx

@@ -5,11 +5,8 @@ import LinearProgress from '@mui/material/LinearProgress';
 import { Theme } from '@mui/material/styles';
 import { makeStyles, withStyles } from 'tss-react/mui';
 
-import { cn } from '../../utils/styles/cn';
-import ContainedButton from '../buttons/ContainedButton';
-import OutlinedButton from '../buttons/OutlinedButton';
 import { TextButton } from '../buttons/TextButton';
-import ArrowDownIcon from '../icons/ArrowDownIcon';
+import { PrevNextButtons } from '../molecules/PrevNextButtons/PrevNextButtons';
 import FixedFooter from './';
 
 const StyledLinearProgress = withStyles(LinearProgress, theme => ({
@@ -40,14 +37,14 @@ interface Props {
  onSave?: () => void;
  saveDisabled: boolean;
  saveText: string;
- saveExitText: string;
+ saveExitText?: string;
  hideProgress?: boolean;
  // TODO: we should probably use a helper function to calculate this, or it would
  // be hard to manage. One idea is to have an array with all routes which contain
  // steps, and use the order of a route in that array to determine the percentage
  // of overall completion, but that would depend on each step living in its own
  // route. Another would just be to pass total steps + current step
- percentComplete: number;
+ percentComplete?: number;
  saveAndExit?: () => Promise<void>;
 }
 
@@ -60,25 +57,14 @@ const useStyles = makeStyles<StyleProps>()((theme, { hideProgress }) => ({
  arrows: {
  margin: theme.spacing(0, 2, 0, 0),
  },
- btn: {
- padding: theme.spacing(2, 4),
- minWidth: 0,
- height: '100%',
- [theme.breakpoints.up('sm')]: {
- fontSize: theme.spacing(4),
- },
- [theme.breakpoints.down('sm')]: {
- fontSize: theme.spacing(3),
- height: theme.spacing(11),
- },
- },
 }));
 
 const SaveFooter: React.FC<React.PropsWithChildren<Props>> = ({
  saveText,
  saveExitText,
  hideProgress = false,
  saveAndExit,
+ percentComplete,
  ...props
 }) => {
  const { classes } = useStyles({ hideProgress });
@@ -106,33 +92,16 @@ const SaveFooter: React.FC<React.PropsWithChildren<Props>> = ({
  </Grid>
 
  <Grid item className={classes.arrows}>
- {props.onPrev && (
- <OutlinedButton
- className={cn(classes.btn, 'mr-10 sm:mr-20')}
- onClick={props.onPrev}
- >
- <ArrowDownIcon
- fontSize="small"
- direction="prev"
- color={theme.palette.secondary.main}
- />
- </OutlinedButton>
- )}
- <ContainedButton
- type="submit"
- className={classes.btn}
- onClick={props.onSave}
- disabled={props.saveDisabled}
- >
- {saveText}
- </ContainedButton>
+ <PrevNextButtons
+ saveDisabled={props.saveDisabled}
+ saveText={saveText}
+ onPrev={props.onPrev}
+ onSave={props.onSave}
+ />
  </Grid>
  </Grid>
- {!hideProgress && (
- <StyledLinearProgress
- variant="determinate"
- value={props.percentComplete}
- />
+ {!hideProgress && typeof percentComplete !== 'undefined' && (
+ <StyledLinearProgress variant="determinate" value={percentComplete} />
  )}
  </FixedFooter>
  );

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

@@ -23,8 +23,8 @@ export const CogIcon = ({ linearGradient, ...props }: Props) => (
  ? '#8F8F8F'
  : 'currentColor'
  }
- stroke-width="2"
- stroke-linejoin="round"
+ strokeWidth="2"
+ strokeLinejoin="round"
  />
  <path
  d="M8.71875 11.66C8.71875 13.2837 10.035 14.6 11.6587 14.6C13.2825 14.6 14.5987 13.2837 14.5987 11.66C14.5987 10.0363 13.2825 8.71997 11.6587 8.71997C10.035 8.71997 8.71875 10.0363 8.71875 11.66Z"
@@ -35,7 +35,7 @@ export const CogIcon = ({ linearGradient, ...props }: Props) => (
  ? '#8F8F8F'
  : 'currentColor'
  }
- stroke-linejoin="round"
+ strokeLinejoin="round"
  />
  <defs>
  <linearGradient
@@ -48,9 +48,9 @@ export const CogIcon = ({ linearGradient, ...props }: Props) => (
  >
  <stop
  offset="0.00458717"
- stop-color={props.disabled ? '#8F8F8F' : '#7BC796'}
+ stopColor={props.disabled ? '#8F8F8F' : '#7BC796'}
  />
- <stop offset="1" stop-color={props.disabled ? '#EFEFEF' : '#C5E6D1'} />
+ <stop offset="1" stopColor={props.disabled ? '#EFEFEF' : '#C5E6D1'} />
  </linearGradient>
  <linearGradient
  id="linear1_cog_icon"
@@ -62,9 +62,9 @@ export const CogIcon = ({ linearGradient, ...props }: Props) => (
  >
  <stop
  offset="0.00458717"
- stop-color={props.disabled ? '#8F8F8F' : '#7BC796'}
+ stopColor={props.disabled ? '#8F8F8F' : '#7BC796'}
  />
- <stop offset="1" stop-color={props.disabled ? '#EFEFEF' : '#C5E6D1'} />
+ <stop offset="1" stopColor={props.disabled ? '#EFEFEF' : '#C5E6D1'} />
  </linearGradient>
  </defs>
  </svg>

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

@@ -1,29 +1,24 @@
 /* eslint-disable lingui/no-unlocalized-strings */
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+import React from 'react';
 
-interface IconProps extends SvgIconProps {}
-
-export default function CreditCardIcon({
- sx = [],
- ...props
-}: IconProps): JSX.Element {
+export default function CreditCardIcon(
+ props: React.SVGProps<SVGSVGElement>,
+): JSX.Element {
  return (
- <SvgIcon
+ <svg
  data-testid="CreditCardIcon"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 29 16"
- sx={[{ fill: 'none' }, ...(Array.isArray(sx) ? sx : [sx])]}
+ width="16"
+ height="16"
+ viewBox="0 0 16 16"
+ fill="none"
  {...props}
  >
- <g id="icon/card">
- <path
- id="Vector"
- fill-rule="evenodd"
- clip-rule="evenodd"
- d="M16 4H0V3.25C0 2.56 0.448 2 1 2H15C15.552 2 16 2.56 16 3.25V4ZM16 6.5V13C16 13.2652 15.8946 13.5196 15.7071 13.7071C15.5196 13.8946 15.2652 14 15 14H1C0.734784 14 0.48043 13.8946 0.292893 13.7071C0.105357 13.5196 0 13.2652 0 13V6.5H16ZM4 10C3.73478 10 3.48043 10.1054 3.29289 10.2929C3.10536 10.4804 3 10.7348 3 11C3 11.2652 3.10536 11.5196 3.29289 11.7071C3.48043 11.8946 3.73478 12 4 12H5C5.26522 12 5.51957 11.8946 5.70711 11.7071C5.89464 11.5196 6 11.2652 6 11C6 10.7348 5.89464 10.4804 5.70711 10.2929C5.51957 10.1054 5.26522 10 5 10H4Z"
- fill="#4FB573"
- />
- </g>
- </SvgIcon>
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M16 4H0V3.25C0 2.56 0.448 2 1 2H15C15.552 2 16 2.56 16 3.25V4ZM16 6.5V13C16 13.2652 15.8946 13.5196 15.7071 13.7071C15.5196 13.8946 15.2652 14 15 14H1C0.734784 14 0.48043 13.8946 0.292893 13.7071C0.105357 13.5196 0 13.2652 0 13V6.5H16ZM4 10C3.73478 10 3.48043 10.1054 3.29289 10.2929C3.10536 10.4804 3 10.7348 3 11C3 11.2652 3.10536 11.5196 3.29289 11.7071C3.48043 11.8946 3.73478 12 4 12H5C5.26522 12 5.51957 11.8946 5.70711 11.7071C5.89464 11.5196 6 11.2652 6 11C6 10.7348 5.89464 10.4804 5.70711 10.2929C5.51957 10.1054 5.26522 10 5 10H4Z"
+ fill="currentColor"
+ />
+ </svg>
  );
 }