misc(customer-infos) better provider display in infos

getlago · Mar 5, 2024 · 19d58a8 · 19d58a8
1 parent 49089ff
commit 19d58a8
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 21 deletions.
diff --git a/ditto/base.json b/ditto/base.json
@@ -250,8 +250,6 @@
   "text_62b328ead9a4caef81cd9c9e": "Search or select a payment provider",
   "text_62b328ead9a4caef81cd9ca0": "Payment provider customer ID",
   "text_62b328ead9a4caef81cd9ca2": "Type the payment provider customer ID",
-  "text_62b5c912506c4905fa755248": "Default payment provider",
-  "text_62b5c912506c4905fa75524a": "Stripe",
   "text_62b5c912506c4905fa75524c": "Payment provider customer ID",
   "text_64fa170e02f348164797a6af": "Duplicate",
   "text_64fa1756d7ccc300a03a09f4": "Edit, duplicate, delete",

diff --git a/src/components/customers/CustomerMainInfos.tsx b/src/components/customers/CustomerMainInfos.tsx
@@ -1,7 +1,8 @@
 import { gql } from '@apollo/client'
+import { Stack } from '@mui/material'
 import styled from 'styled-components'
 
-import { Button, Skeleton, Typography } from '~/components/designSystem'
+import { Avatar, Button, Skeleton, Typography } from '~/components/designSystem'
 import { CountryCodes } from '~/core/constants/countryCodes'
 import { getTimezoneConfig } from '~/core/timezone'
 import {
@@ -12,6 +13,9 @@ import {
   useIntegrationsListForCustomerMainInfosQuery,
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
+import Adyen from '~/public/images/adyen.svg'
+import Gocardless from '~/public/images/gocardless.svg'
+import Stripe from '~/public/images/stripe.svg'
 import { theme } from '~/styles'
 import { SectionHeader } from '~/styles/customer'
 
@@ -228,25 +232,21 @@ export const CustomerMainInfos = ({ loading, customer, onEdit }: CustomerMainInf
           {country && <Typography color="textSecondary">{CountryCodes[country]}</Typography>}
         </div>
       )}
-      {!!paymentProvider && (
+      {!!paymentProvider && !!linkedProvider?.name && (
         <div>
-          <Typography variant="caption">{translate('text_62b5c912506c4905fa755248')}</Typography>
-          <Typography color="textSecondary">
-            {paymentProvider === ProviderTypeEnum?.Stripe
-              ? translate('text_62b5c912506c4905fa75524a')
-              : paymentProvider === ProviderTypeEnum?.Gocardless
-                ? translate('text_634ea0ecc6147de10ddb6648')
-                : paymentProvider === ProviderTypeEnum?.Adyen
-                  ? translate('text_645d071272418a14c1c76a6d')
-                  : ''}
-          </Typography>
-        </div>
-      )}
-      {!!linkedProvider && (
-        <div>
-          <Typography variant="caption">{translate('text_65940198687ce7b05cd62b61')}</Typography>
-          <Typography color="grey700">{linkedProvider?.name}</Typography>
-          <Typography color="grey600">{linkedProvider?.code}</Typography>
+          <Typography variant="caption">{translate('text_62b1edddbf5f461ab9712795')}</Typography>
+          <Stack direction="row" spacing={2} alignItems="center">
+            <Avatar variant="connector" size="small">
+              {paymentProvider === ProviderTypeEnum?.Stripe ? (
+                <Stripe />
+              ) : paymentProvider === ProviderTypeEnum?.Gocardless ? (
+                <Gocardless />
+              ) : paymentProvider === ProviderTypeEnum?.Adyen ? (
+                <Adyen />
+              ) : null}
+            </Avatar>
+            <Typography color="grey700">{linkedProvider?.name}</Typography>
+          </Stack>
         </div>
       )}
       {!!providerCustomer && !!providerCustomer?.providerCustomerId && (