feat: APP-366 account orders (#2566)

regen-network · Jan 7, 2025 · 55d411d · 55d411d
1 parent b2c761a
commit 55d411d
Show file tree

Hide file tree

Showing 52 changed files with 3,827 additions and 632 deletions.
diff --git a/web-marketplace/indexer-graphql.schema.json b/web-marketplace/indexer-graphql.schema.json
diff --git a/web-marketplace/src/clients/regen/Regen.Routes.tsx b/web-marketplace/src/clients/regen/Regen.Routes.tsx
@@ -339,7 +339,7 @@ export const getRegenRoutes = ({
             path="settings"
             element={<AuthRoute component={ProfileEditSettings} />}
           />
-          {/* <Route path="my-orders" element={<AuthRoute component={Orders} />} /> */}
+          <Route path="my-orders" element={<AuthRoute component={Orders} />} />
         </Route>
       </Route>
       <Route path="connect-wallet" element={<ConnectWalletPage />} />

diff --git a/web-marketplace/src/components/atoms/AuthRoute.tsx b/web-marketplace/src/components/atoms/AuthRoute.tsx
@@ -22,7 +22,9 @@ const AuthRoute = ({ component: Component }: Props): JSX.Element => {
 
   return (
     <WithLoader isLoading={loading} sx={loaderStyles.withLoaderBlock}>
-      <div className="min-h-[500px]">{activeAccountId && <Component />}</div>
+      <div className="min-h-[500px] bg-grey-100">
+        {activeAccountId && <Component />}
+      </div>
     </WithLoader>
   );
 };

diff --git a/web-marketplace/src/components/organisms/AdminNavigation/AdminNavigation.constants.tsx b/web-marketplace/src/components/organisms/AdminNavigation/AdminNavigation.constants.tsx
diff --git a/web-marketplace/src/components/organisms/AdminNavigation/AdminNavigation.stories.tsx b/web-marketplace/src/components/organisms/AdminNavigation/AdminNavigation.stories.tsx
@@ -3,7 +3,7 @@ import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { AdminNavigation, AdminNavigationProps } from './AdminNavigation';
-import { adminNavigationSections } from './AdminNavigation.constants';
+import { getAdminNavigationSections } from './AdminNavigation.utils';
 
 export default {
   title: 'Marketplace/Organisms/AdminNavigation',
@@ -24,7 +24,7 @@ export const Default: Story = (args: AdminNavigationProps) => {
     <div className="max-w-[240px]">
       <AdminNavigation
         {...args}
-        sections={adminNavigationSections}
+        sections={getAdminNavigationSections({ showOrders: true })}
         currentPath={currentPath}
         onNavItemClick={handleNavItemClick}
         savedPaymentInfo={true}

diff --git a/web-marketplace/src/components/organisms/AdminNavigation/AdminNavigation.test.tsx b/web-marketplace/src/components/organisms/AdminNavigation/AdminNavigation.test.tsx
@@ -1,10 +1,10 @@
 import { fireEvent, render, screen } from 'web-marketplace/test/test-utils';
 
 import { AdminNavigation } from './AdminNavigation';
-import { adminNavigationSections } from './AdminNavigation.constants';
+import { getAdminNavigationSections } from './AdminNavigation.utils';
 
 describe('AdminNavigation', () => {
-  const sections = adminNavigationSections;
+  const sections = getAdminNavigationSections({ showOrders: true });
   const item = sections[0].items[0];
   const onNavClick = vi.fn();
   it('renders navigation sections and items', () => {

diff --git a/web-marketplace/src/components/organisms/AdminNavigation/AdminNavigation.utils.ts b/web-marketplace/src/components/organisms/AdminNavigation/AdminNavigation.utils.ts
diff --git a/web-marketplace/src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx b/web-marketplace/src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx
@@ -0,0 +1,68 @@
+import { i18n } from '@lingui/core';
+import { msg } from '@lingui/macro';
+
+import { CogIcon } from 'web-components/src/components/icons/CogIcon';
+import { ShoppingBagIcon } from 'web-components/src/components/icons/ShoppingBagIcon';
+// import { EnvelopeIcon } from 'web-components/src/components/icons/EnvelopeIcon';
+// import { PaymentInfoIcon } from 'web-components/src/components/icons/PaymentInfoIcon';
+// import { PrefinanceIcon } from 'web-components/src/components/icons/PrefinanceIcon';
+import { UserMenuIcon } from 'web-components/src/components/icons/UserMenuIcon';
+
+import { AdminNavigationSection } from './AdminNavigation.types';
+
+export const getAdminNavigationSections = ({
+  showOrders,
+}: {
+  showOrders?: boolean;
+}): AdminNavigationSection[] => {
+  const sections = [
+    {
+      heading: i18n._(msg`Profile`),
+      items: [
+        {
+          name: i18n._(msg`Edit profile`),
+          icon: <UserMenuIcon linearGradient />,
+          path: 'profile',
+        },
+        {
+          name: i18n._(msg`Settings`),
+          icon: <CogIcon linearGradient />,
+          path: 'settings',
+        },
+        // {
+        //   name: i18n._(msg`Email updates`),
+        //   icon: <EnvelopeIcon linearGradient />,
+        //   path: 'email-updates',
+        // },
+      ],
+    },
+  ];
+
+  if (showOrders) {
+    sections.unshift({
+      heading: i18n._(msg`Orders`),
+      items: [
+        {
+          name: i18n._(msg`My orders`),
+          icon: <ShoppingBagIcon linearGradient />,
+          path: 'my-orders',
+        },
+        // {
+        //   name: i18n._(msg`My prefinance projects`),
+        //   icon: <PrefinanceIcon linearGradient width="24" height="24" />,
+        //   path: 'my-prefinance-projects',
+        // },
+        // {
+        //   name: i18n._(msg`Saved payment info`),
+        //   icon: <PaymentInfoIcon linearGradient />,
+        //   path: 'payment-info',
+        // },
+      ],
+    });
+  }
+  return sections;
+};
+
+export const isSelected = (path: string, location: string) => {
+  return path === location.substring(location.lastIndexOf('/') + 1);
+};
diff --git a/web-marketplace/src/components/organisms/EditProfileForm/EditProfileForm.tsx b/web-marketplace/src/components/organisms/EditProfileForm/EditProfileForm.tsx
@@ -130,7 +130,7 @@ const EditProfileForm: React.FC<React.PropsWithChildren<EditProfileFormProps>> =
 
     return (
       <Form
-        className="px-10 py-40 md:p-40"
+        className="px-10 py-40 md:p-40 bg-bc-neutral-0 border border-solid border-bc-neutral-300"
         form={form}
         onSubmit={async data => {
           const hasError = validateEditProfileForm({

diff --git a/web-marketplace/src/components/organisms/Order/Order.Icon.tsx b/web-marketplace/src/components/organisms/Order/Order.Icon.tsx
@@ -1,6 +1,6 @@
 export const OrderDetailsIcon = ({ icon }: { icon: React.ReactNode }) => {
   return (
-    <div className="flex items-center bg-grey-300 rounded-full p-10 w-[44px] h-[44px]">
+    <div className="flex items-center bg-bc-neutral-200 rounded-full p-10 w-[44px] h-[44px]">
       {icon}
     </div>
   );

diff --git a/web-marketplace/src/components/organisms/Order/Order.Summary.tsx b/web-marketplace/src/components/organisms/Order/Order.Summary.tsx
@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { msg, Trans } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
+import { AllowedDenom } from '@regen-network/api/lib/generated/regen/ecocredit/marketplace/v1/state';
 import { USD_DENOM } from 'config/allowedBaseDenoms';
 
 import { BlockchainIcon } from 'web-components/src/components/icons/BlockchainIcon';
@@ -13,7 +14,6 @@ import { Link } from 'components/atoms';
 import { AmountWithCurrency } from 'components/molecules/AmountWithCurrency/AmountWithCurrency';
 import { DenomIconWithCurrency } from 'components/molecules/DenomIconWithCurrency/DenomIconWithCurrency';
 import { findDisplayDenom } from 'components/molecules/DenomLabel/DenomLabel.utils';
-import { allowedDenoms } from 'components/organisms/Order/Order.mock';
 
 import { OrderSummarySection } from './Order.Summary.Section';
 import { OrderSummaryRow } from './Order.SummaryRow';
@@ -29,24 +29,27 @@ interface OrderSummaryProps {
   blockchainDetails: BlockchainDetailsData;
   creditsData: CreditsData;
   paymentInfo: PaymentInfoData;
+  allowedDenoms?: AllowedDenom[];
 }
 
 export const OrderSummary = ({
   creditsData,
   retirementInfo,
   blockchainDetails,
   paymentInfo,
+  allowedDenoms,
 }: OrderSummaryProps) => {
   const { _ } = useLingui();
   const { purchaseDate, blockchainRecord } = blockchainDetails;
-  const { nameOnCard, askDenom, askBaseDenom, cardLast4, cardBrand } =
-    paymentInfo;
-  const isCardPayment = nameOnCard && cardLast4 && askDenom === USD_DENOM;
-  const isTradable = retirementInfo.tradableCredits !== null;
-  const { reason, location, tradableCredits } = retirementInfo;
-  const { credits, price } = creditsData;
+  const { askDenom, askBaseDenom, cardLast4, cardBrand } = paymentInfo;
+  const isCardPayment = cardLast4 && askDenom === USD_DENOM;
+  const { reason, location, retiredCredits } = retirementInfo;
+  const { credits, totalPrice } = creditsData;
 
-  const totalPrice = +credits * +price;
+  const denom = allowedDenoms?.find(denom => denom.bankDenom === askDenom);
+  const displayTotalPrice = denom
+    ? +totalPrice * Math.pow(10, -denom.exponent)
+    : +totalPrice;
   const currency = {
     askDenom,
     askBaseDenom,
@@ -58,7 +61,7 @@ export const OrderSummary = ({
         bankDenom: askDenom,
         baseDenom: askBaseDenom,
       }),
-    [askBaseDenom, askDenom],
+    [allowedDenoms, askBaseDenom, askDenom],
   );
 
   return (
@@ -71,7 +74,7 @@ export const OrderSummary = ({
           title={_(msg`Price per credit`)}
           value={
             <AmountWithCurrency
-              amount={+price}
+              amount={+displayTotalPrice / +credits}
               currency={currency}
               displayDenom={displayDenom}
               classes={{
@@ -91,7 +94,7 @@ export const OrderSummary = ({
           title={_(msg`total price`)}
           value={
             <AmountWithCurrency
-              amount={totalPrice}
+              amount={displayTotalPrice}
               currency={currency}
               displayDenom={displayDenom}
               classes={{
@@ -107,19 +110,32 @@ export const OrderSummary = ({
         icon={<CertifiedDocumentIcon className="text-grey-500" />}
         title={_(msg`Retirement Info`)}
       >
-        {isTradable ? (
+        {!retiredCredits ? (
           <OrderSummaryRow
             title={_(msg`Tradable Credits`)}
-            value={<span className="italic">{tradableCredits}</span>}
+            value={
+              <span className="italic">
+                {_(
+                  msg`Credits were purchased in a tradable format and were not retired`,
+                )}
+              </span>
+            }
             clampDescription={false}
           />
         ) : (
           <>
-            <OrderSummaryRow title={_(msg`Retirement reason`)} value={reason} />
-            <OrderSummaryRow
-              title={_(msg`Retirement location`)}
-              value={location}
-            />
+            {reason && (
+              <OrderSummaryRow
+                title={_(msg`Retirement reason`)}
+                value={reason}
+              />
+            )}
+            {location && (
+              <OrderSummaryRow
+                title={_(msg`Retirement location`)}
+                value={location}
+              />
+            )}
             {/* <OrderSummaryRow
               title="Make anonymous"
               value={
@@ -140,12 +156,12 @@ export const OrderSummary = ({
       >
         {isCardPayment ? (
           <>
-            <OrderSummaryRow title={_(msg`name on card`)} value={nameOnCard} />
             <OrderSummaryRow
               title={_(msg`card info`)}
               value={
                 <span>
-                  {cardBrand} {_(msg`ending in`)} {cardLast4}
+                  <span className="capitalize">{cardBrand}</span>{' '}
+                  {_(msg`ending in`)} {cardLast4}
                 </span>
               }
               className="items-center"

diff --git a/web-marketplace/src/components/organisms/Order/Order.SummaryRow.tsx b/web-marketplace/src/components/organisms/Order/Order.SummaryRow.tsx
@@ -15,7 +15,7 @@ export const OrderSummaryRow = ({
   titleClassName?: string;
 }) => {
   return (
-    <div className={cn('grid grid-cols-[105px_auto] mb-10', className)}>
+    <div className={cn('grid grid-cols-[105px_auto] mb-5 sm:mb-10', className)}>
       <Title
         variant="h6"
         className={cn(