From 9bdab196658c648b427dcba2a87bc49ca1b15fe9 Mon Sep 17 00:00:00 2001
From: Alexandre Monjol <alexandre.monjol@gmail.com>
Date: Mon, 6 Jan 2025 15:53:14 +0100
Subject: [PATCH] misc: restore list item icon

---
 src/pages/AddOnsList.tsx          | 39 ++++++++++++++++++-------------
 src/pages/BillableMetricsList.tsx | 30 +++++++++++++++++-------
 src/pages/CouponsList.tsx         | 19 ++++++++++-----
 src/pages/CustomersList.tsx       | 23 ++++++++++++++----
 src/pages/PlansList.tsx           | 28 +++++++++++++++-------
 5 files changed, 95 insertions(+), 44 deletions(-)

diff --git a/src/pages/AddOnsList.tsx b/src/pages/AddOnsList.tsx
index 0aaf09676..99db1b63c 100644
--- a/src/pages/AddOnsList.tsx
+++ b/src/pages/AddOnsList.tsx
@@ -6,7 +6,9 @@ import styled from 'styled-components'
 import { DeleteAddOnDialog, DeleteAddOnDialogRef } from '~/components/addOns/DeleteAddOnDialog'
 import {
   ActionItem,
+  Avatar,
   ButtonLink,
+  Icon,
   InfiniteScroll,
   Table,
   Typography,
@@ -116,22 +118,27 @@ const AddOnsList = () => {
               minWidth: 200,
               maxSpace: true,
               content: ({ name, amountCents, amountCurrency }) => (
-                <>
-                  <Typography color="textSecondary" variant="bodyHl" noWrap>
-                    {name}
-                  </Typography>
-                  <Typography variant="caption" noWrap>
-                    {translate('text_629728388c4d2300e2d3810b', {
-                      amountWithCurrency: intlFormatNumber(
-                        deserializeAmount(amountCents, amountCurrency) || 0,
-                        {
-                          currencyDisplay: 'symbol',
-                          currency: amountCurrency,
-                        },
-                      ),
-                    })}
-                  </Typography>
-                </>
+                <div className="flex items-center gap-3">
+                  <Avatar size="big" variant="connector">
+                    <Icon name="puzzle" color="dark" />
+                  </Avatar>
+                  <div>
+                    <Typography color="textSecondary" variant="bodyHl" noWrap>
+                      {name}
+                    </Typography>
+                    <Typography variant="caption" noWrap>
+                      {translate('text_629728388c4d2300e2d3810b', {
+                        amountWithCurrency: intlFormatNumber(
+                          deserializeAmount(amountCents, amountCurrency) || 0,
+                          {
+                            currencyDisplay: 'symbol',
+                            currency: amountCurrency,
+                          },
+                        ),
+                      })}
+                    </Typography>
+                  </div>
+                </div>
               ),
             },
             {
diff --git a/src/pages/BillableMetricsList.tsx b/src/pages/BillableMetricsList.tsx
index f7b1afb6b..4ff532433 100644
--- a/src/pages/BillableMetricsList.tsx
+++ b/src/pages/BillableMetricsList.tsx
@@ -7,7 +7,14 @@ import {
   DeleteBillableMetricDialog,
   DeleteBillableMetricDialogRef,
 } from '~/components/billableMetrics/DeleteBillableMetricDialog'
-import { ButtonLink, InfiniteScroll, Table, Typography } from '~/components/designSystem'
+import {
+  Avatar,
+  ButtonLink,
+  Icon,
+  InfiniteScroll,
+  Table,
+  Typography,
+} from '~/components/designSystem'
 import { SearchInput } from '~/components/SearchInput'
 import { CREATE_BILLABLE_METRIC_ROUTE, UPDATE_BILLABLE_METRIC_ROUTE } from '~/core/router'
 import { useBillableMetricsLazyQuery } from '~/generated/graphql'
@@ -104,14 +111,19 @@ const BillableMetricsList = () => {
               minWidth: 200,
               maxSpace: true,
               content: ({ name, code }) => (
-                <>
-                  <Typography color="textSecondary" variant="bodyHl" noWrap>
-                    {name}
-                  </Typography>
-                  <Typography variant="caption" noWrap>
-                    {code}
-                  </Typography>
-                </>
+                <div className="flex items-center gap-3">
+                  <Avatar size="big" variant="connector">
+                    <Icon name="pulse" color="dark" />
+                  </Avatar>
+                  <div>
+                    <Typography color="textSecondary" variant="bodyHl" noWrap>
+                      {name}
+                    </Typography>
+                    <Typography variant="caption" noWrap>
+                      {code}
+                    </Typography>
+                  </div>
+                </div>
               ),
             },
             {
diff --git a/src/pages/CouponsList.tsx b/src/pages/CouponsList.tsx
index cbc596f16..e01d7c513 100644
--- a/src/pages/CouponsList.tsx
+++ b/src/pages/CouponsList.tsx
@@ -10,7 +10,9 @@ import {
   TerminateCouponDialogRef,
 } from '~/components/coupons/TerminateCouponDialog'
 import {
+  Avatar,
   ButtonLink,
+  Icon,
   InfiniteScroll,
   Status,
   StatusProps,
@@ -145,12 +147,17 @@ const CouponsList = () => {
               minWidth: 200,
               maxSpace: true,
               content: (coupon) => (
-                <>
-                  <Typography color="textSecondary" variant="bodyHl" noWrap>
-                    {coupon.name}
-                  </Typography>
-                  <CouponCaption coupon={coupon} variant="caption" />
-                </>
+                <div className="flex items-center gap-3">
+                  <Avatar size="big" variant="connector">
+                    <Icon name="coupon" color="dark" />
+                  </Avatar>
+                  <div>
+                    <Typography color="textSecondary" variant="bodyHl" noWrap>
+                      {coupon.name}
+                    </Typography>
+                    <CouponCaption coupon={coupon} variant="caption" />
+                  </div>
+                </div>
               ),
             },
             {
diff --git a/src/pages/CustomersList.tsx b/src/pages/CustomersList.tsx
index 4bff7b039..120dcada4 100644
--- a/src/pages/CustomersList.tsx
+++ b/src/pages/CustomersList.tsx
@@ -10,7 +10,8 @@ import {
   DeleteCustomerDialog,
   DeleteCustomerDialogRef,
 } from '~/components/customers/DeleteCustomerDialog'
-import { Button, InfiniteScroll, Table, Typography } from '~/components/designSystem'
+import { computeCustomerInitials } from '~/components/customers/utils'
+import { Avatar, Button, InfiniteScroll, Table, Typography } from '~/components/designSystem'
 import { PaymentProviderChip } from '~/components/PaymentProviderChip'
 import { SearchInput } from '~/components/SearchInput'
 import { CUSTOMER_DETAILS_ROUTE } from '~/core/router'
@@ -121,11 +122,22 @@ const CustomersList = () => {
             {
               key: 'displayName',
               title: translate('text_624efab67eb2570101d117cc'),
-              content: ({ displayName }) => {
+              minWidth: 200,
+              content: (customer) => {
+                const customerInitials = computeCustomerInitials(customer)
+
                 return (
-                  <Typography variant="bodyHl" color="textSecondary" noWrap>
-                    {displayName || '-'}
-                  </Typography>
+                  <div className="flex items-center gap-3">
+                    <Avatar
+                      variant="user"
+                      size="medium"
+                      identifier={customer.displayName as string}
+                      initials={customerInitials}
+                    />
+                    <Typography variant="bodyHl" color="textSecondary" noWrap>
+                      {customer.displayName || '-'}
+                    </Typography>
+                  </div>
                 )
               },
             },
@@ -134,6 +146,7 @@ const CustomersList = () => {
               title: translate('text_6419c64eace749372fc72b27'),
               content: ({ email }) => email || '-',
               maxSpace: true,
+              minWidth: 200,
             },
             {
               key: 'activeSubscriptionsCount',
diff --git a/src/pages/PlansList.tsx b/src/pages/PlansList.tsx
index 2ccaf9d7f..d25dbb83d 100644
--- a/src/pages/PlansList.tsx
+++ b/src/pages/PlansList.tsx
@@ -3,7 +3,14 @@ import { useRef } from 'react'
 import { generatePath, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 
-import { ButtonLink, InfiniteScroll, Table, Typography } from '~/components/designSystem'
+import {
+  Avatar,
+  ButtonLink,
+  Icon,
+  InfiniteScroll,
+  Table,
+  Typography,
+} from '~/components/designSystem'
 import { DeletePlanDialog, DeletePlanDialogRef } from '~/components/plans/DeletePlanDialog'
 import { SearchInput } from '~/components/SearchInput'
 import { updateDuplicatePlanVar } from '~/core/apolloClient/reactiveVars/duplicatePlanVar'
@@ -115,13 +122,18 @@ const PlansList = () => {
               maxSpace: true,
               minWidth: 200,
               content: ({ name, code }) => (
-                <div>
-                  <Typography color="textSecondary" variant="bodyHl" noWrap>
-                    {name}
-                  </Typography>
-                  <Typography variant="caption" noWrap>
-                    {code}
-                  </Typography>
+                <div className="flex items-center gap-3">
+                  <Avatar size="big" variant="connector">
+                    <Icon name="board" color="dark" />
+                  </Avatar>
+                  <div>
+                    <Typography color="textSecondary" variant="bodyHl" noWrap>
+                      {name}
+                    </Typography>
+                    <Typography variant="caption" noWrap>
+                      {code}
+                    </Typography>
+                  </div>
                 </div>
               ),
             },