Add type to billing list & renamed Date to Issuing date (#944)

(FRONT-1178) Closes FRONT-1178
swan-io · Oct 7, 2024 · 140fc18 · 140fc18
1 parent f39195b
commit 140fc18
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 17 deletions.
diff --git a/clients/banking/src/graphql/partner.gql b/clients/banking/src/graphql/partner.gql
@@ -571,6 +571,7 @@ query AccountDetailsBillingPage($accountId: ID!, $first: Int!, $after: String) {
           openingDate
           closingDate
           id
+          type
           name
           createdAt
           updatedAt

diff --git a/clients/banking/src/locales/de.json b/clients/banking/src/locales/de.json
@@ -77,13 +77,15 @@
   "accountClose.whyLeaving": "Warum verlassen Sie uns?",
   "accountDetails.billing.actions": "Aktionen",
   "accountDetails.billing.amount": "Gesamtbetrag",
-  "accountDetails.billing.date": "Datum",
+  "accountDetails.billing.date": "Ausstellungsdatum",
   "accountDetails.billing.emptyDescription": "Ihre erste Rechnung wird nach dem ersten Monat der Nutzung erstellt.",
   "accountDetails.billing.emptyTitle": "Sie haben noch keine Rechnungen",
   "accountDetails.billing.name": "Name",
   "accountDetails.billing.noDocumentTooltip": "Kein Dokument verfügbar",
   "accountDetails.billing.status": "Status",
   "accountDetails.billing.tab": "Abrechnung",
+  "accountDetails.billing.type.Invoice": "Rechnung",
+  "accountDetails.billing.type.RefundNote": "Rückerstattungshinweis",
   "accountDetails.iban.addressLabel": "Adresse",
   "accountDetails.iban.bankDetails": "Bankdaten",
   "accountDetails.iban.bicLabel": "BIC",

diff --git a/clients/banking/src/locales/en.json b/clients/banking/src/locales/en.json
@@ -77,13 +77,15 @@
   "accountClose.whyLeaving": "Why are you leaving?",
   "accountDetails.billing.actions": "Actions",
   "accountDetails.billing.amount": "Total amount",
-  "accountDetails.billing.date": "Date",
+  "accountDetails.billing.date": "Issuing date",
   "accountDetails.billing.emptyDescription": "Your first invoice will be generated after your first month of use.",
   "accountDetails.billing.emptyTitle": "You don't have any invoices yet",
   "accountDetails.billing.name": "Name",
   "accountDetails.billing.noDocumentTooltip": "No document available",
   "accountDetails.billing.status": "Status",
   "accountDetails.billing.tab": "Billing",
+  "accountDetails.billing.type.Invoice": "Invoice",
+  "accountDetails.billing.type.RefundNote": "Refund note",
   "accountDetails.iban.addressLabel": "Address",
   "accountDetails.iban.bankDetails": "Bank details",
   "accountDetails.iban.bicLabel": "BIC",

diff --git a/clients/banking/src/locales/es.json b/clients/banking/src/locales/es.json
@@ -77,13 +77,15 @@
   "accountClose.whyLeaving": "¿Por qué te vas?",
   "accountDetails.billing.actions": "Acciones",
   "accountDetails.billing.amount": "Cantidad total",
-  "accountDetails.billing.date": "Fecha",
+  "accountDetails.billing.date": "Fecha de emisión",
   "accountDetails.billing.emptyDescription": "Tu primera factura se generará después de tu primer mes de uso.",
   "accountDetails.billing.emptyTitle": "Aún no tienes ninguna factura",
   "accountDetails.billing.name": "Nombre",
   "accountDetails.billing.noDocumentTooltip": "No hay documentos disponibles",
   "accountDetails.billing.status": "Estado",
   "accountDetails.billing.tab": "Facturación",
+  "accountDetails.billing.type.Invoice": "Factura",
+  "accountDetails.billing.type.RefundNote": "Nota de reembolso",
   "accountDetails.iban.addressLabel": "Dirección",
   "accountDetails.iban.bankDetails": "Datos bancarios",
   "accountDetails.iban.bicLabel": "BIC",

diff --git a/clients/banking/src/locales/fi.json b/clients/banking/src/locales/fi.json
@@ -77,13 +77,15 @@
   "accountClose.whyLeaving": "Miksi poistut?",
   "accountDetails.billing.actions": "Toiminnot",
   "accountDetails.billing.amount": "Yhteensä",
-  "accountDetails.billing.date": "Päivämäärä",
+  "accountDetails.billing.date": "Laskutuspäivä",
   "accountDetails.billing.emptyDescription": "Ensimmäinen laskusi luodaan ensimmäisen käyttökuukautesi jälkeen.",
   "accountDetails.billing.emptyTitle": "Sinulla ei vielä ole laskuja",
   "accountDetails.billing.name": "Nimi",
   "accountDetails.billing.noDocumentTooltip": "Ei asiakirjoja käytettävissä",
   "accountDetails.billing.status": "Tila",
   "accountDetails.billing.tab": "Laskutus",
+  "accountDetails.billing.type.Invoice": "Lasku",
+  "accountDetails.billing.type.RefundNote": "Hyvityshuomautus",
   "accountDetails.iban.addressLabel": "Osoite",
   "accountDetails.iban.bankDetails": "Pankin tiedot",
   "accountDetails.iban.bicLabel": "BIC-koodi",

diff --git a/clients/banking/src/locales/fr.json b/clients/banking/src/locales/fr.json
@@ -77,13 +77,15 @@
   "accountClose.whyLeaving": "Pourquoi partez-vous ?",
   "accountDetails.billing.actions": "Actions",
   "accountDetails.billing.amount": "Montant total",
-  "accountDetails.billing.date": "Date",
+  "accountDetails.billing.date": "Date d'émission",
   "accountDetails.billing.emptyDescription": "Votre première facture sera générée après votre premier mois d’utilisation.",
   "accountDetails.billing.emptyTitle": "Vous n'avez encore aucune facture",
   "accountDetails.billing.name": "Nom",
   "accountDetails.billing.noDocumentTooltip": "Aucun document disponible",
   "accountDetails.billing.status": "Statut",
   "accountDetails.billing.tab": "Facturation",
+  "accountDetails.billing.type.Invoice": "Facture",
+  "accountDetails.billing.type.RefundNote": "Note de remboursement",
   "accountDetails.iban.addressLabel": "Adresse",
   "accountDetails.iban.bankDetails": "Coordonnées bancaires",
   "accountDetails.iban.bicLabel": "BIC",

diff --git a/clients/banking/src/locales/it.json b/clients/banking/src/locales/it.json
@@ -77,13 +77,15 @@
   "accountClose.whyLeaving": "Perché sta lasciando il conto?",
   "accountDetails.billing.actions": "Azioni",
   "accountDetails.billing.amount": "Importo totale",
-  "accountDetails.billing.date": "Data",
+  "accountDetails.billing.date": "Data di emissione",
   "accountDetails.billing.emptyDescription": "La prima fattura sarà generata dopo il primo mese di utilizzo.",
   "accountDetails.billing.emptyTitle": "Non ha ancora nessuna fattura",
   "accountDetails.billing.name": "Nome",
   "accountDetails.billing.noDocumentTooltip": "Nessun documento disponibile",
   "accountDetails.billing.status": "Stato",
   "accountDetails.billing.tab": "Fatturazione",
+  "accountDetails.billing.type.Invoice": "Fattura",
+  "accountDetails.billing.type.RefundNote": "Nota di rimborso",
   "accountDetails.iban.addressLabel": "Indirizzo",
   "accountDetails.iban.bankDetails": "Coordinate bancarie",
   "accountDetails.iban.bicLabel": "BIC",

diff --git a/clients/banking/src/locales/nl.json b/clients/banking/src/locales/nl.json
@@ -77,13 +77,15 @@
   "accountClose.whyLeaving": "Waarom verlaat u ons?",
   "accountDetails.billing.actions": "Acties",
   "accountDetails.billing.amount": "Totaalbedrag",
-  "accountDetails.billing.date": "Datum",
+  "accountDetails.billing.date": "Uitgiftedatum",
   "accountDetails.billing.emptyDescription": "Je eerste factuur wordt gegenereerd na de eerste maand van gebruik.",
   "accountDetails.billing.emptyTitle": "Je hebt nog geen factuur",
   "accountDetails.billing.name": "Naam",
   "accountDetails.billing.noDocumentTooltip": "Geen document beschikbaar",
   "accountDetails.billing.status": "Status",
   "accountDetails.billing.tab": "Facturatie",
+  "accountDetails.billing.type.Invoice": "Factuur",
+  "accountDetails.billing.type.RefundNote": "Terugbetalingsnota",
   "accountDetails.iban.addressLabel": "Adres",
   "accountDetails.iban.bankDetails": "Bankinformatie",
   "accountDetails.iban.bicLabel": "BIC",

diff --git a/clients/banking/src/locales/pt.json b/clients/banking/src/locales/pt.json
@@ -77,13 +77,15 @@
   "accountClose.whyLeaving": "Por que você está saindo?",
   "accountDetails.billing.actions": "Ações",
   "accountDetails.billing.amount": "Montante total",
-  "accountDetails.billing.date": "Data",
+  "accountDetails.billing.date": "Data de emissão",
   "accountDetails.billing.emptyDescription": "A sua primeira fatura será gerada após o primeiro mês de utilização.",
   "accountDetails.billing.emptyTitle": "Ainda não tem nenhuma fatura",
   "accountDetails.billing.name": "Nome",
   "accountDetails.billing.noDocumentTooltip": "Nenhum documento disponível",
   "accountDetails.billing.status": "Estado",
   "accountDetails.billing.tab": "Faturação",
+  "accountDetails.billing.type.Invoice": "Fatura",
+  "accountDetails.billing.type.RefundNote": "Nota de reembolso",
   "accountDetails.iban.addressLabel": "Endereço",
   "accountDetails.iban.bankDetails": "Detalhes bancários",
   "accountDetails.iban.bicLabel": "BIC",

diff --git a/clients/banking/src/pages/AccountDetailsBillingPage.tsx b/clients/banking/src/pages/AccountDetailsBillingPage.tsx
@@ -1,5 +1,6 @@
 import { Link } from "@swan-io/chicane";
 import { useQuery } from "@swan-io/graphql-client";
+import { Box } from "@swan-io/lake/src/components/Box";
 import {
   CellAction,
   EndAlignedCell,
@@ -9,17 +10,20 @@ import {
 } from "@swan-io/lake/src/components/Cells";
 import { EmptyView } from "@swan-io/lake/src/components/EmptyView";
 import { Icon } from "@swan-io/lake/src/components/Icon";
+import { LakeText } from "@swan-io/lake/src/components/LakeText";
 import { LakeTooltip } from "@swan-io/lake/src/components/LakeTooltip";
 import {
   ColumnConfig,
   PlainListView,
   PlainListViewPlaceholder,
 } from "@swan-io/lake/src/components/PlainListView";
+import { Space } from "@swan-io/lake/src/components/Space";
 import { Tag } from "@swan-io/lake/src/components/Tag";
 import { colors } from "@swan-io/lake/src/constants/design";
 import { isNotNullish } from "@swan-io/lake/src/utils/nullish";
 import { GetNode } from "@swan-io/lake/src/utils/types";
 import dayjs from "dayjs";
+import { StyleSheet } from "react-native";
 import { match } from "ts-pattern";
 import { Connection } from "../components/Connection";
 import { ErrorView } from "../components/ErrorView";
@@ -29,6 +33,15 @@ import {
 } from "../graphql/partner";
 import { formatCurrency, t } from "../utils/i18n";
 
+const styles = StyleSheet.create({
+  regularText: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    flexGrow: 1,
+    whiteSpace: "nowrap",
+  },
+});
+
 type Props = {
   accountId: string;
   large: boolean;
@@ -46,7 +59,26 @@ const columns: ColumnConfig<Invoices, ExtraInfo>[] = [
     width: "grow",
     id: "name",
     renderTitle: ({ title }) => <SimpleHeaderCell text={title} />,
-    renderCell: ({ item: { name } }) => <SimpleRegularTextCell text={name} />,
+    renderCell: ({ item: { name, type } }) => (
+      <StartAlignedCell>
+        <Box direction="column">
+          <LakeText color={colors.gray[900]} style={styles.regularText} variant="regular">
+            {name}
+          </LakeText>
+
+          <Space height={4} />
+
+          {match(type)
+            .with("Invoice", () => (
+              <Tag color="shakespear">{t("accountDetails.billing.type.Invoice")}</Tag>
+            ))
+            .with("RefundNote", () => (
+              <Tag color="darkPink">{t("accountDetails.billing.type.RefundNote")}</Tag>
+            ))
+            .otherwise(() => null)}
+        </Box>
+      </StartAlignedCell>
+    ),
   },
   {
     title: t("accountDetails.billing.date"),
@@ -131,8 +163,28 @@ const smallColumns: ColumnConfig<Invoices, ExtraInfo>[] = [
     width: "grow",
     id: "name",
     renderTitle: ({ title }) => <SimpleHeaderCell text={title} />,
-    renderCell: ({ item: { name } }) => <SimpleRegularTextCell text={name} />,
+    renderCell: ({ item: { name, type } }) => (
+      <StartAlignedCell>
+        <Box direction="column">
+          <LakeText color={colors.gray[900]} style={styles.regularText} variant="regular">
+            {name}
+          </LakeText>
+
+          <Space height={4} />
+
+          {match(type)
+            .with("Invoice", () => (
+              <Tag color="shakespear">{t("accountDetails.billing.type.Invoice")}</Tag>
+            ))
+            .with("RefundNote", () => (
+              <Tag color="darkPink">{t("accountDetails.billing.type.RefundNote")}</Tag>
+            ))
+            .otherwise(() => null)}
+        </Box>
+      </StartAlignedCell>
+    ),
   },
+
   {
     title: t("accountDetails.billing.amount"),
     width: 150,
@@ -209,12 +261,7 @@ export const AccountDetailsBillingPage = ({ accountId, large }: Props) => {
   return data.match({
     NotAsked: () => null,
     Loading: () => (
-      <PlainListViewPlaceholder
-        count={20}
-        groupHeaderHeight={48}
-        headerHeight={48}
-        rowHeight={48}
-      />
+      <PlainListViewPlaceholder count={20} groupHeaderHeight={0} headerHeight={48} rowHeight={72} />
     ),
     Done: result =>
       result.match({
@@ -226,7 +273,7 @@ export const AccountDetailsBillingPage = ({ accountId, large }: Props) => {
                 data={invoices?.edges?.map(({ node }) => node) ?? []}
                 keyExtractor={item => item.id}
                 headerHeight={48}
-                rowHeight={48}
+                rowHeight={72}
                 groupHeaderHeight={48}
                 extraInfo={undefined}
                 columns={columns}