feat(invoice) display unit price in details

ditto/base.json

@@ -698,7 +698,6 @@
  "text_64639c4d172d7a006ef30514": "Tax rate",
  "text_64639c4d172d7a006ef30515": "Search or select a tax rate",
  "text_6499a4e4db5730004703f36b": "Fees from {{from}} to {{to}}",
- "text_6499a6209ae0d900826053a7": "Due {{date}}",
  "text_645d071272418a14c1c76a77": "API key",
  "text_645d071272418a14c1c76a83": "Type an API key",
  "text_645d071272418a14c1c76a8f": "Merchant Account",
@@ -707,7 +706,6 @@
  "text_645d071272418a14c1c76ab0": "Type a Live prefix",
  "text_645d071272418a14c1c76aba": "HMAC Signature (optional)",
  "text_645d071272418a14c1c76ac4": "Type a HMAC Signature",
- "text_649ab559e86bd6005ba9d725": "a one off invoice",
  "text_649e848fa4c023006e94ca32": "Coupon description (optional)",
  "text_649e85d35208d700473f79c9": "Describe your coupon",
  "text_64a6d736c23125004817627f": "Cancel subscription",
@@ -1635,6 +1633,25 @@
  "text_65269cd46e7ec037a6823fd6": "There are no voided invoices",
  "text_65269cd46e7ec037a6823fda": "You can void an invoice to mark it as non due. All voided invoices will be listed here",
  "text_65269cd46e7ec037a6823fd8": "This voided invoice cannot be found",
+ "text_659e67cd63512ef53284305a": "Minimum spend of {{amount}} prorated on days of usage",
+ "text_659e67cd63512ef532843070": "Fee per unit for the first {{toValue}}",
+ "text_659e67cd63512ef5328430af": "Fee per unit for the next {{fromValue}} to {{toValue}}",
+ "text_659e67cd63512ef5328430e6": "Fee per unit for {{fromValue}} and above",
+ "text_659e67cd63512ef53284310e": "Flat fee for the first {{toValue}}",
+ "text_659e67cd63512ef532843136": "Flat fee for the next {{fromValue}} to {{toValue}}",
+ "text_659e67cd63512ef53284314a": "Flat fee for {{fromValue}} and above",
+ "text_659e67cd63512ef532843154": "Subtotal",
+ "text_659e67cd63512ef532843078": "Fee per unit",
+ "text_659e67cd63512ef5328430b5": "Flat fee for all units",
+ "text_659e67cd63512ef53284303c": "Free units for the first {{freeUnits}}",
+ "text_659e67cd63512ef532843064": "Fee per package",
+ "text_659e67cd63512ef532843074": "{{perPackageUnitAmount}} per {{perPackageSize}}",
+ "text_659e67cd63512ef53284303e": "Total events: {{eventsCount}} transactions",
+ "text_659e67cd63512ef532843046": "Free units for {{freeEvents}} transactions|Free units for {{freeEvents}} transaction|Free units for {{freeEvents}} transactions",
+ "text_659e67cd63512ef53284306e": "Rate on the amount",
+ "text_659e67cd63512ef53284308f": "Fixed fee per transaction",
+ "text_659e67cd63512ef5328430ad": "Adjustment for min/max per transaction",
+ "text_659e6b6b8e57e6ff88a34930": "The fee is prorated on days of usage, the displayed unit price is an average",
  "text_6543ca0fdebf76a18e159294": "Edit default currency",
  "text_6543ca0fdebf76a18e159298": "This setting establishes a default currency for all object creations and for displaying the analytics page.",
  "text_6543ca0fdebf76a18e15929c": "Default currency",
@@ -1735,8 +1752,6 @@
  "text_634687079be251fdb43833fb": "Invoice number",
  "text_634687079be251fdb4383407": "Issuing date",
  "text_634687079be251fdb4383413": "Payment date",
- "text_634d631acf4dce7b0127a39a": "{{invoiceDisplayName}} details",
- "text_634d631acf4dce7b0127a3a0": "Total unit",
  "text_634d631acf4dce7b0127a3a6": "Amount",
  "text_634812d6f16b31ce5cbf4111": "Something went wrong",
  "text_634812d6f16b31ce5cbf411f": "Please refresh the page or contact us if the error persists.",
@@ -1872,11 +1887,11 @@
  "text_6391f05df4bf96d81f3660a7": "Credits",
  "text_637ccf8133d2c9a7d11ce70d": "Total amount due",
  "text_63887b52e514213fed57fc1c": "Total due",
- "text_637cd81348c50c26dd05a767": "Credit note <a href=\"{{link}}\">{{CreditNoteNumber}}</a> on {{displayName}}",
  "text_637cd81348c50c26dd05a769": "Amount",
  "text_637ccf8133d2c9a7d11ce73d": "Credit subtotal (excl. tax)",
  "text_637ccf8133d2c9a7d11ce741": "Tax",
  "text_637ccf8133d2c9a7d11ce745": "Credit note total",
+ "text_659522c816b5850068729025": "Credit note <a href=\"{{link}}\">{{CreditNoteNumber}}</a>",
  "text_637de077dca2f885da839287": "Refund issued",
  "text_638f48274d41e3f1d01fc16a": "The coupon can be applied several times to the same customer",
  "text_638f48274d41e3f1d01fc119": "This coupon is not reusable and was already applied to {{customerFullName}}. Please apply another coupon.",

ditto/config.yml

@@ -322,5 +322,8 @@ sources:
  fileName: 👍 [Ready for dev] - Settings - Define invoice number
  - name: ⚙️ [WIP] - Integration - Lago EU tax integration
  id: 657078becf8335e0955b5bf4
+ fileName: ⚙️ [WIP] - Integration - Lago EU tax integration
+ - name: 👍 [Ready for dev] - Invoices - Display unit price to item in invoices
+ id: 659e67cc6afb842e8db57be5
 format: flat
 variants: true

ditto/index.js

@@ -53,6 +53,9 @@ module.exports = {
  "project_6543ca0b70910093c87cd539": {
  "base": require('./-ready-for-dev---dashboards---add-financial-reporting-to-lago__base.json')
  },
+ "project_659e67cc6afb842e8db57be5": {
+ "base": require('./-ready-for-dev---invoices---display-unit-price-to-item-in-invoices__base.json')
+ },
  "project_65269b3f720470569cb17228": {
  "base": require('./-ready-for-dev---invoices---void-invoices__base.json')
  },

src/components/invoices/InvoiceCreditNotesTable.tsx

@@ -9,7 +9,7 @@ import { CUSTOMER_INVOICE_CREDIT_NOTE_DETAILS_ROUTE } from '~/core/router'
 import { deserializeAmount } from '~/core/serializers/serializeAmount'
 import { CreditNote, CreditNoteItem, CurrencyEnum, FeeTypesEnum } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
-import { NAV_HEIGHT, theme } from '~/styles'
+import { theme } from '~/styles'
 
 gql`
  fragment InvoiceForCreditNotesTable on Invoice {
@@ -105,40 +105,38 @@ export const InvoiceCreditNotesTable = memo(
  const subscription = subscriptionItem[0][0]
  ? subscriptionItem[0][0]?.fee.subscription
  : undefined
- const creditNoteDisplayName = !!subscription
- ? subscription?.name ||
- subscription.plan.invoiceDisplayName ||
- subscription?.plan?.name
- : translate('text_649ab559e86bd6005ba9d725')
+ const creditNoteDisplayName =
+ subscription?.name ||
+ subscription?.plan.invoiceDisplayName ||
+ subscription?.plan?.name
 
  return (
  <React.Fragment key={`formatedCreditNote-${i}-subscriptionItem-${j}`}>
  <table>
  <thead>
  <tr>
- <InlineTh>
+ <th>
  <Typography
- variant="bodyHl"
- color="grey500"
- html={translate('text_637cd81348c50c26dd05a767', {
+ variant="captionHl"
+ color="grey600"
+ html={translate('text_659522c816b5850068729025', {
  link: generatePath(CUSTOMER_INVOICE_CREDIT_NOTE_DETAILS_ROUTE, {
  customerId,
  invoiceId,
  creditNoteId: creditNote.id,
  }),
  CreditNoteNumber: creditNote.number,
- displayName: creditNoteDisplayName,
  })}
  noWrap
  />
- </InlineTh>
+ </th>
  <th>
- <Typography variant="bodyHl" color="grey500">
+ <Typography variant="captionHl" color="grey600">
  {translate('text_636bedf292786b19d3398f06')}
  </Typography>
  </th>
  <th>
- <Typography variant="bodyHl" color="grey500">
+ <Typography variant="captionHl" color="grey600">
  {translate('text_637cd81348c50c26dd05a769')}
  </Typography>
  </th>
@@ -164,7 +162,7 @@ export const InvoiceCreditNotesTable = memo(
  >
  <tr key={`formatedCreditNote-${i}-charge-${j}-item-${k}`}>
  <td>
- <Typography variant="body" color="grey700">
+ <Typography variant="bodyHl" color="grey700">
  {groupDimension === 0 ? (
  <>
  {item?.fee?.feeType === FeeTypesEnum.AddOn
@@ -427,84 +425,63 @@ const Wrapper = styled.section`
  > thead > tr > th,
  > tbody > tr > td {
  overflow: hidden;
- line-break: anywhere;
+ text-align: right;
 
- &:nth-child(1) {
- width: 70%;
+ &:not(:first-child) {
+ line-break: anywhere;
  }
- &:nth-child(2) {
- width: 10%;
- }
- &:nth-child(3) {
- width: 20%;
+
+ &:not(:last-child) {
+ padding-right: ${theme.spacing(8)};
+ box-sizing: border-box;
  }
- }
 
- > tfoot > tr > td {
  &:nth-child(1) {
- width: 50%;
+ width: 75%;
+ text-align: left;
  }
  &:nth-child(2) {
- width: 35%;
+ width: 10%;
  }
  &:nth-child(3) {
  width: 15%;
  }
  }
 
- > tfoot > tr > td {
- &:nth-child(2) {
- text-align: left;
- }
- }
-
- th:not(:last-child),
- td:not(:last-child) {
- padding-right: ${theme.spacing(3)};
+ > thead > tr > th {
+ position: sticky;
+ top: 72px;
+ background-color: ${theme.palette.common.white};
+ padding: ${theme.spacing(8)} 0 ${theme.spacing(3)} 0;
+ box-sizing: border-box;
+ box-shadow: ${theme.shadows[7]};
  }
 
- > thead > tr > th,
  > tbody > tr > td {
- text-align: right;
-
- &:first-child {
-  text-align: left;
- }
+ vertical-align: top;
+ min-height: 44px;
+ padding: ${theme.spacing(3)} 0;
+ box-sizing: border-box;
+ box-shadow: ${theme.shadows[7]};
  }
 
  > tfoot > tr > td {
  text-align: right;
  padding: ${theme.spacing(3)} 0;
- }
+  box-sizing: border-box;
 
- > tfoot > tr > td {
- &:nth-child(2),
+ &:nth-child(1) {
+ width: 50%;
+ }
+ &:nth-child(2) {
+ width: 35%;
+ text-align: left;
+ box-shadow: ${theme.shadows[7]};
+ }
  &:nth-child(3) {
+ width: 15%;
  box-shadow: ${theme.shadows[7]};
  }
  }
-
- > thead > tr {
- height: ${NAV_HEIGHT}px;
- box-shadow: ${theme.shadows[7]};
- }
-
- > thead > tr > th {
- height: ${NAV_HEIGHT}px;
- box-sizing: border-box;
- padding: ${theme.spacing(8)} 0 ${theme.spacing(3)} 0;
- }
-
- > tbody > tr > td {
- vertical-align: top;
- min-height: 44px;
- padding: ${theme.spacing(3)} 0;
- box-shadow: ${theme.shadows[7]};
- }
  }
 `
-
-const InlineTh = styled.th`
- display: flex;
- align-items: center;
-`

src/components/invoices/InvoiceCustomerInfos.tsx

@@ -265,18 +265,13 @@ InvoiceCustomerInfos.displayName = 'InvoiceCustomerInfos'
 const Wrapper = styled.section`
  padding: ${theme.spacing(6)} 0;
  box-shadow: ${theme.shadows[7]};
- display: flex;
-
- > * {
- flex: 1;
- }
-
- > div:first-child > div > *:last-child {
- padding-right: ${theme.spacing(8)};
- }
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: ${theme.spacing(8)};
 
  ${theme.breakpoints.down('md')} {
- flex-direction: column;
+ grid-template-columns: 1fr;
+ gap: initial;
  }
 `