feat: APP-368 add user balance error in buy credits form

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>
   );
 }