feat: APP-366 account orders

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 />} />

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

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}

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', () => {

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

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({

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

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"

web-marketplace/src/components/organisms/Order/Order.mock.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable lingui/no-unlocalized-strings */
-import { REGEN_DENOM, USD_DENOM } from 'config/allowedBaseDenoms';
+import { AllowedDenom } from '@regen-network/api/lib/generated/regen/ecocredit/marketplace/v1/state';
+import { REGEN_DENOM, USD_DENOM, USDC_DENOM } from 'config/allowedBaseDenoms';
 
 import {
   BlockchainDetailsData,
@@ -9,11 +10,12 @@ import {
 } from './Order.types';
 
 export const retirementInfo: RetirementInfoData = {
-  tradableCredits: null,
+  retiredCredits: true,
   reason:
     'For the betterment of my children lorem ipsum. For the betterment children lorem ipsum. For the betterment of my children lorem ipsum.',
   location: 'location',
   makeAnonymous: false,
+  certificateNodeId: 'abcde',
 };
 
 export const blockchainDetails: BlockchainDetailsData = {
@@ -23,15 +25,14 @@ export const blockchainDetails: BlockchainDetailsData = {
 
 export const credits: CreditsData = {
   credits: '2',
-  price: '40',
+  totalPrice: '40',
   askDenom: USD_DENOM,
   askBaseDenom: USD_DENOM,
 };
 
 export const paymentInfo: PaymentInfoData = {
   askDenom: USD_DENOM,
   askBaseDenom: USD_DENOM,
-  nameOnCard: 'Steph Green',
   cardLast4: '1234',
   cardBrand: 'Visa',
 };
@@ -40,18 +41,22 @@ export const allowedDenoms = [
   {
     displayDenom: 'regen',
     bankDenom: REGEN_DENOM,
+    exponent: 6,
   },
   {
-    displayDenom: 'USDC',
+    displayDenom: USDC_DENOM,
     bankDenom: 'ibc/123',
+    exponent: 6,
   },
   {
     // eslint-disable-next-line lingui/no-unlocalized-strings
     displayDenom: 'USDC.axl',
     bankDenom: 'ibc/456',
+    exponent: 6,
   },
   {
     displayDenom: 'evmos',
     bankDenom: 'ibc/789',
+    exponent: 18,
   },
-];
+] as AllowedDenom[];