feat: APP-267 accounts orders page (#2483)

Co-authored-by: r41ph <“ralph.galan@regen.network>
regen-network · Oct 9, 2024 · 4a295a8 · 4a295a8
1 parent 664b9c5
commit 4a295a8
Show file tree

Hide file tree

Showing 36 changed files with 1,675 additions and 42 deletions.
diff --git a/tailwind.common.js b/tailwind.common.js
@@ -12,6 +12,7 @@ module.exports = {
  // Make sure these guidelines are followed when adding new colors: https://tailwindcss.com/docs/customizing-colors#using-css-variables
  // Color variables should be added to tailwind.css.
  brand: {
+ 500: 'rgb(var(--brand-500) / <alpha-value>)',
  400: 'rgb(var(--brand-400) / <alpha-value>)',
  300: 'rgb(var(--brand-300) / <alpha-value>)',
  200: 'rgb(var(--brand-200) / <alpha-value>)',
@@ -53,6 +54,9 @@ module.exports = {
  200: 'rgb(var(--purple-200) / <alpha-value>)',
  100: 'rgb(var(--purple-100) / <alpha-value>)',
  },
+ orange: {
+ 700: 'rgb(var(--orange-700) / <alpha-value>)',
+ },
  },
  spacing: {
  // This spacing scale is based on the actual pixel values converted to REM values.

diff --git a/tailwind.css b/tailwind.css
@@ -11,7 +11,7 @@
 
  Colors are based off of https://www.figma.com/file/Md1Cl2B9eJi4NMzQgpbdMF/Dark-Mode?type=design&node-id=112-9885&mode=design&t=YKxx8fYvslM2TeLp-0.
  */
-
+ --brand-500: 26 125 60;
  --brand-400: 79 181 115;
  --brand-300: 123 199 150;
  --brand-200: 185 225 199;
@@ -47,6 +47,9 @@
  --purple-300: 128 142 171;
  --purple-200: 187 195 210;
  --purple-100: 221 225 233;
+
+ --orange-700: 122 64 11;
+
  }
 
  .dark {

diff --git a/web-components/src/components/SupCurrencyAndAmount/SupCurrencyAndAmount.tsx b/web-components/src/components/SupCurrencyAndAmount/SupCurrencyAndAmount.tsx
@@ -1,4 +1,4 @@
-import { CURRENCIES } from '../DenomIconWithCurrency/DenomIconWithCurrency.constants';
+import { USD_DENOM } from 'web-marketplace/src/config/allowedBaseDenoms';
 
 export function SupCurrencyAndAmount({
  price,
@@ -9,11 +9,11 @@ export function SupCurrencyAndAmount({
  currencyCode: string;
  className?: string;
 }) {
- return currencyCode === CURRENCIES.usd ? (
- <>
- <span className="align-top text-xs">$</span>
+ return currencyCode === USD_DENOM ? (
+ <span>
+ <span className="align-top text-[11px] leading-normal">$</span>
  <span className={className}>{price.toFixed(2)}</span>
- </>
+ </span>
  ) : (
  <span className={className}>{price}</span>
  );

diff --git a/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.test.tsx b/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.test.tsx
@@ -49,23 +49,24 @@ describe('OrderSummaryCard', () => {
  render(<OrderSummaryCard {...orderSummary} />);
 
  const editButton = screen.getByRole('button', {
- name: 'Edit',
+ name: /edit/i,
  });
  fireEvent.click(editButton);
- const editInput = screen.getByRole('textbox', {
- name: 'editable-credits',
- });
- fireEvent.change(editInput, { target: { value: 7 } });
+ const editInput = screen.getByTestId(/editable-input/i);
 
- const updateButton = screen.getByRole('button', {
- name: 'update',
- });
- fireEvent.click(updateButton);
- const updatedNumberOfCredits = screen.getByText('7');
- expect(updatedNumberOfCredits).toBeInTheDocument();
+ if (editInput) {
+ fireEvent.change(editInput, { target: { value: 7 } });
 
- const pricePerCredit = screen.getByText(/70.00/i);
- expect(pricePerCredit).toBeInTheDocument();
+ const updateButton = screen.getByRole('button', {
+ name: 'update',
+ });
+ fireEvent.click(updateButton);
+ const updatedNumberOfCredits = screen.getByText('7');
+ expect(updatedNumberOfCredits).toBeInTheDocument();
+
+ const pricePerCredit = screen.getByText(/70.00/i);
+ expect(pricePerCredit).toBeInTheDocument();
+ }
  });
 
  it('displays the total price', () => {

diff --git a/web-components/src/components/icons/BlockchainIcon.tsx b/web-components/src/components/icons/BlockchainIcon.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+
+type Props = {
+ color?: string;
+ className?: string;
+} & React.SVGProps<SVGSVGElement>;
+
+export const BlockchainIcon = (props: Props) => {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="25"
+ height="24"
+ viewBox="0 0 25 24"
+ fill="none"
+ {...props}
+ >
+ <g clip-path="url(#clip0_4785_34949)">
+ <path
+ d="M12.5 5L19.4282 8.5V15.5L12.5 19L5.5718 15.5V8.5L12.5 5Z"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linejoin="round"
+ />
+ <path
+ d="M12.5 1L22.8923 6.5V17.5L12.5 23L2.1077 17.5V6.5L12.5 1Z"
+ stroke="currentColor"
+ stroke-linejoin="round"
+ stroke-dasharray="2 2"
+ />
+ <line
+ x1="12.5"
+ y1="12"
+ x2="12.5"
+ y2="19"
+ stroke="currentColor"
+ stroke-width="2"
+ />
+ <line
+ x1="19.1003"
+ y1="8.89404"
+ x2="11.948"
+ y2="12.4779"
+ stroke="currentColor"
+ stroke-width="2"
+ />
+ <line
+ y1="-1"
+ x2="8"
+ y2="-1"
+ transform="matrix(0.894043 0.447982 0.447982 -0.894043 6.5 8)"
+ stroke="currentColor"
+ stroke-width="2"
+ />
+ </g>
+ <defs>
+ <clipPath id="clip0_4785_34949">
+ <rect
+ width="24"
+ height="24"
+ fill="white"
+ transform="translate(0.5)"
+ />
+ </clipPath>
+ </defs>
+ </svg>
+ );
+};
diff --git a/web-components/src/components/icons/PaymentInfoIcon.tsx b/web-components/src/components/icons/PaymentInfoIcon.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+type Props = {
+ linearGradient?: boolean;
+ disabled?: boolean;
+} & React.SVGProps<SVGSVGElement>;
+
+export const PaymentInfoIcon = ({ disabled, ...props }: Props) => {
+ const randomId = Math.random().toString(36).substring(7);
+ const gradientId = props
+ ? `payment_info_gradient-${randomId}`
+ : 'payment_info_gradient';
+ return (
+ <svg
+ id={randomId}
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ {...props}
+ >
+ <g id="Icon / Credit Card">
+ <path
+ id="Union"
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M19 6H5C4.44772 6 4 6.44772 4 7V8L20 8V7C20 6.44771 19.5523 6 19 6ZM2 8.25V8.75V16C2 17.6569 3.34315 19 5 19H19C20.6569 19 22 17.6569 22 16V8.75V8.25V7C22 5.34315 20.6569 4 19 4H5C3.34315 4 2 5.34315 2 7V8.25ZM19 17C19.5523 17 20 16.5523 20 16V9L4 9V16C4 16.5523 4.44772 17 5 17H19ZM5 10.75C5 10.8881 5.11193 11 5.25 11H8.75C8.88807 11 9 10.8881 9 10.75V10.25C9 10.1119 8.88807 10 8.75 10H5.25C5.11193 10 5 10.1119 5 10.25V10.75ZM10.25 11C10.1119 11 10 10.8881 10 10.75V10.25C10 10.1119 10.1119 10 10.25 10H13.75C13.8881 10 14 10.1119 14 10.25V10.75C14 10.8881 13.8881 11 13.75 11H10.25ZM14.5 14.25C14.5 13.8358 14.8358 13.5 15.25 13.5C15.495 13.5 15.7126 13.617 15.8503 13.8002C15.9447 13.9259 16.0928 13.9999 16.25 13.9999C16.4072 13.9999 16.5553 13.9259 16.6497 13.8002C16.7874 13.617 17.005 13.5 17.25 13.5C17.6642 13.5 18 13.8358 18 14.25C18 14.6642 17.6642 15 17.25 15C17.005 15 16.7874 14.883 16.6497 14.6998C16.5553 14.5741 16.4072 14.5001 16.25 14.5001C16.0928 14.5001 15.9447 14.5741 15.8503 14.6998C15.7126 14.883 15.495 15 15.25 15C14.8358 15 14.5 14.6642 14.5 14.25ZM15.25 12.5C14.2835 12.5 13.5 13.2835 13.5 14.25C13.5 15.2165 14.2835 16 15.25 16C15.6219 16 15.9667 15.8838 16.25 15.6862C16.5333 15.8838 16.8781 16 17.25 16C18.2165 16 19 15.2165 19 14.25C19 13.2835 18.2165 12.5 17.25 12.5C16.8781 12.5 16.5333 12.6162 16.25 12.8138C15.9667 12.6162 15.6219 12.5 15.25 12.5Z"
+ fill={
+ props.linearGradient
+ ? `url(#${gradientId})`
+ : disabled
+ ? '#8F8F8F'
+ : 'currentColor'
+ }
+ />
+ </g>
+ <defs>
+ <linearGradient
+ id={gradientId}
+ x1="12"
+ y1="4"
+ x2="7.21101"
+ y2="19.9633"
+ gradientUnits="userSpaceOnUse"
+ >
+ <stop
+ offset="0.00458717"
+ stopColor={disabled ? '#8F8F8F' : '#7BC796'}
+ />
+ <stop offset="1" stopColor={disabled ? '#EFEFEF' : '#C5E6D1'} />
+ </linearGradient>
+ </defs>
+ </svg>
+ );
+};
diff --git a/web-components/src/components/icons/PendingIcon.tsx b/web-components/src/components/icons/PendingIcon.tsx
@@ -17,7 +17,7 @@ export default function PendingIcon({
  fillRule="evenodd"
  clipRule="evenodd"
  d="M9.8125 1.78124C5.77437 1.78124 2.5 5.18156 2.5 9.375H0.0625L3.22312 12.6572L3.28 12.7753L6.5625 9.375H4.125C4.125 6.10968 6.66813 3.46874 9.8125 3.46874C12.9569 3.46874 15.5 6.10968 15.5 9.375C15.5 12.6403 12.9569 15.2813 9.8125 15.2813C8.24438 15.2813 6.8225 14.6147 5.79875 13.5431L4.645 14.7413C5.96937 16.1166 7.78937 16.9688 9.8125 16.9688C13.8506 16.9688 17.125 13.5684 17.125 9.375C17.125 5.18156 13.8506 1.78124 9.8125 1.78124ZM9 6L9 10.2188L12.4775 12.3619L13.0625 11.3409L10.2187 9.58594L10.2188 6H9Z"
- fill="black"
+ fill="currentColor"
  />
  </SvgIcon>
  );

diff --git a/web-components/src/components/icons/ReceiptIcon.tsx b/web-components/src/components/icons/ReceiptIcon.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+
+type Props = {
+ color?: string;
+ className?: string;
+} & React.SVGProps<SVGSVGElement>;
+
+export const ReceiptIcon = (props: Props) => (
+ <svg
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ {...props}
+ >
+ <path
+ d="M7.25 12C7.11193 12 7 11.8881 7 11.75V11.25C7 11.1119 7.11193 11 7.25 11H16.75C16.8881 11 17 11.1119 17 11.25V11.75C17 11.8881 16.8881 12 16.75 12H7.25Z"
+ fill="currentColor"
+ />
+ <path
+ d="M7 14.75C7 14.8881 7.11193 15 7.25 15H16.75C16.8881 15 17 14.8881 17 14.75V14.25C17 14.1119 16.8881 14 16.75 14H7.25C7.11193 14 7 14.1119 7 14.25V14.75Z"
+ fill="currentColor"
+ />
+ <path
+ d="M7.25 18C7.11193 18 7 17.8881 7 17.75V17.25C7 17.1119 7.11193 17 7.25 17H14.75C14.8881 17 15 17.1119 15 17.25V17.75C15 17.8881 14.8881 18 14.75 18H7.25Z"
+ fill="currentColor"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M20.9803 7C20.9693 6.97387 20.9538 6.94958 20.9343 6.92831L15.5743 1.08107C15.527 1.02941 15.4601 1 15.39 1H3.25C3.11193 1 3 1.11193 3 1.25V22.75C3 22.8881 3.11193 23 3.25 23H20.75C20.8881 23 21 22.8881 21 22.75V7H20.9803ZM19 8V21H5V3H14V7.25C14 7.66421 14.3358 8 14.75 8H19ZM15 3.41433V7H18.2869L15 3.41433Z"
+ fill="currentColor"
+ />
+ <path
+ d="M8.19997 9.57344V8.89844L8.34997 9.03344C8.10664 9.0201 7.8733 8.98177 7.64997 8.91844C7.42997 8.85177 7.24497 8.7651 7.09497 8.65844L7.34997 7.94344C7.49997 8.04677 7.67497 8.12844 7.87497 8.18844C8.07497 8.24844 8.27664 8.27844 8.47997 8.27844C8.68997 8.27844 8.83664 8.2501 8.91997 8.19344C9.0033 8.13344 9.04497 8.06344 9.04497 7.98344C9.04497 7.91344 9.01497 7.8551 8.95497 7.80844C8.8983 7.76177 8.79497 7.72177 8.64497 7.68844L8.07997 7.56344C7.76664 7.49677 7.53497 7.3801 7.38497 7.21344C7.23497 7.04677 7.15997 6.83177 7.15997 6.56844C7.15997 6.36844 7.2083 6.1901 7.30497 6.03344C7.40497 5.87344 7.5433 5.74344 7.71997 5.64344C7.89997 5.54344 8.10997 5.4801 8.34997 5.45344L8.19997 5.53844V4.89844H8.89497V5.53844L8.74497 5.44344C8.9483 5.45344 9.1433 5.49177 9.32997 5.55844C9.51664 5.6251 9.6683 5.71177 9.78497 5.81844L9.53997 6.48844C9.41997 6.3951 9.2783 6.32344 9.11497 6.27344C8.95164 6.2201 8.77664 6.19344 8.58997 6.19344C8.4133 6.19344 8.27497 6.2251 8.17497 6.28844C8.0783 6.35177 8.02997 6.43344 8.02997 6.53344C8.02997 6.6001 8.0583 6.65677 8.11497 6.70344C8.17497 6.7501 8.2783 6.7901 8.42497 6.82344L8.98997 6.94844C9.30664 7.0151 9.54164 7.1301 9.69497 7.29344C9.8483 7.45344 9.92497 7.66177 9.92497 7.91844C9.92497 8.11844 9.87664 8.2951 9.77997 8.44844C9.6833 8.60177 9.5483 8.72677 9.37497 8.82344C9.20497 8.9201 9.00664 8.98344 8.77997 9.01344L8.89497 8.89344V9.57344H8.19997Z"
+ fill="currentColor"
+ />
+ </svg>
+);
+
+export default ReceiptIcon;
diff --git a/web-components/src/components/icons/icons.stories.tsx b/web-components/src/components/icons/icons.stories.tsx
@@ -88,6 +88,7 @@ import { ProjectPageIconSmall } from './ProjectPageIconSmall';
 import PutInBasketIcon from './PutInBasketIcon';
 import QuestionIcon from './QuestionIcon';
 import QuestionIconOutlined from './QuestionIconOutlined';
+import ReceiptIcon from './ReceiptIcon';
 import RegenIcon from './RegenIcon';
 import RegenLedgerIcon from './RegenLedgerIcon';
 import RegenLogoIcon from './RegenLogoIcon';
@@ -392,5 +393,6 @@ export const allIcons = (): JSX.Element => (
  <LabeledIcon icon={<USFlagIcon />} label="USFlagIcon" />
  <LabeledIcon icon={<CreditCardIcon />} label="CreditCardIcon" />
  <LabeledIcon icon={<CryptoIcon />} label="CryptoIcon" />
+ <LabeledIcon icon={<ReceiptIcon />} label="ReceiptIcon" />
  </Grid>
 );
diff --git a/web-components/src/components/info-label/InfoLabel.tsx b/web-components/src/components/info-label/InfoLabel.tsx
@@ -11,13 +11,17 @@ export interface Props {
  variant?: InfoLabelVariant;
  icon?: React.ReactNode;
  sx?: SxProps<Theme>;
+ labelClassName?: string;
+ wrapperClassName?: string;
 }
 
 const InfoLabel = ({
  label,
  variant = 'default',
  icon,
  sx = [],
+ labelClassName,
+ wrapperClassName,
 }: Props): JSX.Element => {
  const theme = useTheme();
  const infoLabelColorMapping = useMemo(
@@ -38,12 +42,14 @@ const InfoLabel = ({
  },
  ...(Array.isArray(sx) ? sx : [sx]),
  ]}
+ className={wrapperClassName}
  >
  {icon && <Box sx={{ mr: 1 }}>{icon}</Box>}
  <Body
  sx={{
  color: 'primary.light',
  }}
+ className={labelClassName}
  >
  {label}
  </Body>

diff --git a/web-components/src/components/inputs/new/EditableInput/EditableInput.test.tsx b/web-components/src/components/inputs/new/EditableInput/EditableInput.test.tsx
@@ -45,7 +45,7 @@ describe('EditableInput', () => {
  expect(input).toBeInTheDocument();
 
  const updateButton = screen.getByRole('button', {
- name: 'update',
+ name: /update/i,
  });
  expect(updateButton).toBeInTheDocument();
  });
@@ -73,7 +73,7 @@ describe('EditableInput', () => {
  fireEvent.change(input, { target: { value: '200' } });
 
  const updateButton = screen.getByRole('button', {
- name: 'update',
+ name: /update/i,
  });
  fireEvent.click(updateButton);
 

diff --git a/web-components/src/components/inputs/new/EditableInput/EditableInput.tsx b/web-components/src/components/inputs/new/EditableInput/EditableInput.tsx
@@ -64,6 +64,7 @@ export const EditableInput = ({
  aria-label={inputAriaLabel}
  name={name}
  autoFocus
+ data-testid="editable-input"
  />
  <TextButton
  className="lowercase text-[12px] mt-5 sm:mt-0"

diff --git a/web-marketplace/src/clients/regen/Regen.Routes.tsx b/web-marketplace/src/clients/regen/Regen.Routes.tsx
@@ -80,13 +80,15 @@ const ProjectCreate = lazy(() => import('../../pages/ProjectCreate'));
 const ProjectFinished = lazy(() => import('../../pages/ProjectFinished'));
 const ProjectLocation = lazy(() => import('../../pages/ProjectLocation'));
 const ProjectReview = lazy(() => import('../../pages/ProjectReview'));
+// const Roles = lazy(() => import('../../pages/Roles'));
 const VerifyEmail = lazy(() => import('../../pages/VerifyEmail'));
 const ProjectEdit = lazy(() => import('../../pages/ProjectEdit'));
 const Activity = lazy(() => import('../../pages/Activity'));
 const CreateBatch = lazy(() => import('../../pages/CreateBatch'));
 const Storefront = lazy(() => import('../../pages/Marketplace/Storefront'));
 const ConnectWalletPage = lazy(() => import('../../pages/ConnectWalletPage'));
 const ProfileEdit = lazy(() => import('../../pages/ProfileEdit'));
+const Orders = lazy(() => import('../../pages/Orders'));
 
 type RouterProps = {
  reactQueryClient: QueryClient;
@@ -337,6 +339,7 @@ export const getRegenRoutes = ({
  element={<AuthRoute component={ProfileEditSettings} />}
  />
  </Route>
+ <Route path="orders" element={<AuthRoute component={Orders} />} />
  </Route>
  <Route path="connect-wallet" element={<ConnectWalletPage />} />
  <Route path="login" element={<LoginPage />} />

diff --git a/web-marketplace/src/components/atoms/StatusLabel.tsx b/web-marketplace/src/components/atoms/StatusLabel.tsx
@@ -19,7 +19,14 @@ const StatusLabel = ({ status, label }: Props): JSX.Element => {
  case 'complete':
  return <SuccessIcon sx={iconStyle} />;
  case 'pending':
- return <PendingIcon sx={iconStyle} />;
+ return (
+ <PendingIcon
+ sx={theme => ({
+ ...iconStyle,
+ color: theme.palette.primary.contrastText,
+ })}
+ />
+ );
  case 'error':
  return <ErrorIcon sx={iconStyle} />;
  default: