• Build the locationHistory
• If user is logged out du to lack of activity, redirect him.her to the asked page after login

Context of the locationHistory

React router does not allow to have a fallback on a "goBack" action (if the user directly typed an url, goBack in app will redirect to the previously visited page, outside the app, instead of going back to the parent context)

• The color-text in the error alert is not following the design system, color should be grey700 and not grey600, Does it mean the design system is not used in this screen? It says inherit on the data-qa

• The expected behavior is to see the last 3 digits of the API Key on the page. Currently, we just see "3 dots".

• By highlighting the api key, a slider appears creating a bad UX behavior. You can have more details in the video
  Uploading Enregistrement de l’écran 2022-03-11 à 17.20.03.mov…

• On the empty state, we shouldn't have the list-top-bar.

• It wasn't spec in the snippet part but is it possible to have 12px of spacing between the end of last character and the right border of the snippet (even if we can scroll in it)?

• Looks like there's an issue with the copy, it supposed to be Type a code instead of Code in the text-field placeholder

• The combo-box hint doesn't change when I choose Count option, it should explain the count behaviour

• Looks like the disabled button doesn't follow the style of the design system, it should follow the color of the design system.
  

• When I'm hovering an option of the combo-box menu, the option doesn't grey out (hover state). It supposed to follow the design system. I didn;'t QA the combo-box so feel free to ping me

• Is it possible to remove the option to clear the combo-box in the choice of language above the snippet?

• It was not spec'ed, my bad I thought I made it but once the user click on copy button, a toast appears saying Copied to clipboard -> Link here
  

For the mutation createPlan with the following payload :

input: {
   amountCents: 4.5
   amountCurrency: "USD"
   charges: []
   code: "trrop-te"
   description: ""
   interval: "monthly"
   name: "tetrt"
   payInAdvance: false
   trialPeriod: null
}

I get the following error : Variable $input of type CreatePlanInput! was provided invalid value for amountCents (Could not coerce value 4.5 to Int)

I think the graphql type for CreatePlanInput.amountCents should be Float and not Int

Product issue - https://github.com/getlago/lago-product/issues/2

Dialog add / edit invoice data to customer

• There's a missing title in the dialog, we should have Account information above the customer full name and customer external id ⬆️ Stagging screen ⬆️ Figma screen
• The dropdown should be trigger by clicking on the left-chevron-button AND also by clicking on the title Billing information

Edit invoice data to a customer

• When I open the dialog to edit customer info and I click on the billing information section to collapsed it, it's glitching and not collapsing. It should collapse the billing information section https://user-images.githubusercontent.com/82527978/166420919-8e8ea4ed-3344-46d2-abb9-32a3378838aa.mp4

DS - Combo-box fix

• When the combo-box is filled, we should not see the cross-button to erase the info in it by default, this button should appears only when I'm hovering the combo-box See Figma link

Describe the bug

After creating a plan with 0 as value (e.g. amount, trial period, tax rate). When I'm editing the object, the visual feedback shows the same text-filed unfilled

To Reproduce
https://user-images.githubusercontent.com/82527978/165954194-1074cd61-a60c-4ba0-94c6-240a8eec8387.mp4

Expected behavior

During creation, if values are set to 0, when editing, the value prompt should be 0 and not an empty text-field.

• We need to support 5 decimals for charges amount only insted of 2 actually
• Charges amount are now string and not more number

Issue Morguy

Product issue - https://github.com/getlago/lago-product/issues/14

• It looks like the colour font is not the good one, it should be grey700 instead of grey600
  

• We should adapt the snippet a bit with some comments to make it crystal clear
  

Add
# Assign a plan to a customer on top as a first line
+
In the end of the snippet after a line break
# To use the snippet, don’t forget to edit your __YOUR_API_KEY__ and __CUSTOMER_ID__

Describe the bug
Code snippets for event ingestion were lacking the transaction_id field.

This field is used for idem potency on event ingestion and so is a mandatory.

To Reproduce

1. Create or update and existing billable metric
2. Have a look at the code snippet
3. The event payload does not have a transaction_id attribute.

Expected behavior
According to the updated specs, snippets for all aggregation types should contain a transaction_id attribute.

• When I'm opening a popover-menu, by opening a new one, it should close the previous one, we can't have two open at the same time.

Customer details page

• When I'm on the customer detail page, I should see the full name of the customer + her external id in the left column
  

• When I click on adding or editing button in the creation or edition dialog, the button should display a loading state the time to know if the external_id is already existing or no
  https://user-images.githubusercontent.com/82527978/165328783-9db609c8-51dc-4722-b2b8-cb164a890751.mp4

• When a customer is not linked to a subscription, in the actions menu, looks the deleted option is less wider than the other option above.
  
  

• In the customer detail page, when I edit a customer from the columns section, and select again from the main action section, looks there's a problem with in the data inputed in the text-field, it should be the same + if I change it, it should enabled the button
  https://user-images.githubusercontent.com/82527978/165332678-ae0d9d68-11a3-4525-965c-bf385c863bd6.mp4

Customer list view

• When I edit a customer name (or even id), after editing, I re-open the edition mode, the dialog display wrong information and the button is enabled. The dialog should display the changed, correct information and button should be disabled until we change some info
  https://user-images.githubusercontent.com/82527978/165333653-d9d7bd0c-284b-432e-8314-ab1fecdb4614.mp4

• The subscriptions status looks not aligned with what we have in the detailed view, it should be the same
  
  
  
  

Downgrading plan

• When downgrading plan, we should have a line bellow the list saying that the plan is downgrading Figma link
  

• When downgrading plan, we should have the start date of the new plan instead of a -

Product issue - https://github.com/getlago/lago-product/issues/6

Customer detail view

• The button's wording in the edition of a taxe rate is the wrong one, it's written Edit webhook, it should be Edit tax rate, I checked and the wording was good in Ditto.

• Just FYI, I changed a wording in Ditto, on the deletion dialog

Settings view

• Just FYI, I changed a wording in Ditto, on the edition dialog

• When I clicked on a specific customer, I enter in it's details page. I'm loosing the focus on the navigation bar, the customers item should be still selected.
  

-> Seen with Vincent, a coupon can be applied several times to a customer, I change the spec.

• Still back-end QA to perform

Add infinite scroll on every list (+ fetch more)

Describe the bug
When I’m log in to the app with credentials, the app sing in and sing out (glitch) directly. When I clean my cache I can do log in correctly. It should log at the first time.

To Reproduce

Expected behavior
We should not be directly signed out when relogin

TODO

• Add warning modal on create billable metrics flow quit button
• Add Plans in main nav

List

• Loading state
• Error state
• Empty state
• Item with Plan name / Plan code / Nb of customers / Nb of charges / Creation date
• Header width Plan name / Plan code / Nb of customers / Nb of charges / Creation date
• Responsive (hide Nb of customers / Nb of charges)

Creation page

• Code snippet (fixed)
• Responsive
• Button is disabled until all required field are filled
• On click on leave, there is a warning modal with cancel and proceed
• Success page

Section basic infos

• Name is focused by default

Section plan model

• Click on Monthly --> Beginning of the month, End of the month, Subscription date
• Click on Yearly --> Beginning of the year, End of the year, Subscription date
• Deal with the EUR currency and USD
• VAT is set to 0 by default
• Pro-rata is optional

Section additional charges

• On "add a charge" open a modal
• Combobox load billable metrics (loading state in the combobox)
• Combobox empty state
• A charge is added --> displayed in the list
• Charge can be expended/collapsed
• By default the charge is expanded
• A charge can be deleted
• Tooltip on the delete button
• Tooltip on the expand button
• By default, charge model is standard pricing (only option for now)
• Currency of the charge is same as in the plan and is disabled
• charge frequency is set to recurring by default
• Tooltip of the frequency adapt to the value
• VAT is optional and set to 0 by default

Describe the bug

When I'm opening a combo-box in the app, all the item in the combo-box menu are duplicated. When I refreshed the page, a new occurence appears. It should have only one occurence per item

When opening a dropdown on a clickable item (ex: Plan or Billable metric in a list), then opening one on another item, it doesn't close the previous dropdown.

Also check the dialog that are not closing on the clickAwayListener

• When a plan is linked to a customer via a subscription, the plan should not be editable (only name + description). Right now user can add tiers and delete existing one. Button Add another tier should be disabled and when hovering a line between first and last tier, no delete button should appear.
  https://user-images.githubusercontent.com/82527978/168077578-16fa1e68-ec21-40e2-a677-8bfeeb13039c.mp4

• Last unit error should appears when the amount is NOT = OR bigger than First unit. Right now it's working only for bigger but it should include = also

• There's a glitch when typing an amount, it removes some characters (. or 0) (seen with Morguy and Raffi irl)

Document in the wiki the navigation, especially the disableScrollTop option

Describe the bug

Doubled scrollbars in currency dropdown/select

To Reproduce

Go to add a new plan. Click on the currency code. Observe that two scrollbars are shown and the full currency code is obscured.

Expected behavior

The dropdown should be shown without the double scrollbars and the full currency code should be visible.

Screenshots

Additional context

Describe the bug

• When I edit an existing Billable metric, the button is by default enabled even if I change nothing. Buttons should be disabled and turn enabled when something changes
  https://user-images.githubusercontent.com/82527978/169558845-07852787-1885-48e3-9e90-82d663b67a17.mp4

• When I edit an existing Plan, the button stays disabled even if I change info in the Plan/Charge or when adding a charge. Button should switch to disabled to enable when something changes
  https://user-images.githubusercontent.com/82527978/169559137-ba31e81b-73be-4f5a-a42f-ca447626de36.mp4

Hot reload does not work with the actual dev-env.
WebSocketClient.js:16 WebSocket connection to 'wss://app.lago.dev:8080/ws' failed:

Looks like webpack configuration is wrong and don't success to access the websocket server.

• When I'm at the success screen of Create a Billable metric or a Plan and I click on the cross to close the flow, the dialog of warning-leaving appears. It shouldn't appear. By clicking on the close button, user should go back from where she initiate the creation flow and not see the dialog.
  
  

API Issue getlago/lago-api#241
Product issue https://github.com/getlago/lago-product/issues/21#issuecomment-1145779305

Describe the bug
It's currently not possible to have a float with more than 2 decimals when creating charge. However, some users (especially cloud users) might want to change floats > 2 decimals

To Reproduce

1. Create a billable metric
2. Go to the plan
3. Create a charge
4. Try to insert a float with more than 2 decimal

Expected behavior
Don't block the number of decimals

• In the signup flow, the bottom text is between brackets; We need to remove these brackets

Describe the bug

When I'm using QA env [https://qa-app.staging.getlago.com/login], in the creation customer dialog, I can't not use the key k and the key j, when I'm typing them, nothing happens
https://user-images.githubusercontent.com/82527978/169557821-50eb4e3e-9ffc-4aa7-bd7b-aea73426fe59.mp4

[👮‍♂️ Do not close]. This issue provides visibility into Renovate updates and their statuses. Learn more

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps) Update dependency formik to v2.4.6
• chore(deps) Update dependency luxon to v3.4.4 (luxon, @types/luxon)
• chore(deps) Update dependency react-window to v1.8.10 (react-window, @types/react-window)
• chore(deps) Update dependency style-loader to v3.3.4
• chore(deps) Update dependency ts-jest to v29.1.2
• chore(deps) Update dependency yarn to v1.22.22
• chore(deps) Update graphqlcodegenerator monorepo (@graphql-codegen/typescript, @graphql-codegen/typescript-operations, @graphql-codegen/typescript-react-apollo)
• chore(deps-minor) Update Apollo GraphQL packages (@apollo/client, apollo3-cache-persist)
• chore(deps-minor) Update babel monorepo (@babel/core, @babel/preset-env, @babel/preset-react)
• chore(deps-minor) Update dependency @dittowords/cli to v4.5.0
• chore(deps-minor) Update dependency @types/lodash to v4.17.1
• chore(deps-minor) Update dependency classnames to v2.5.1
• chore(deps-minor) Update dependency cypress to v13.8.1
• chore(deps-minor) Update dependency dotenv to v16.4.5
• chore(deps-minor) Update dependency eslint to v8.57.0
• chore(deps-minor) Update dependency eslint-plugin-react to v7.34.1
• chore(deps-minor) Update dependency html-webpack-plugin to v5.6.0
• chore(deps-minor) Update dependency react-router-dom to v6.23.0
• chore(deps-minor) Update dependency recharts to v2.12.6
• chore(deps-minor) Update dependency ts-loader to v9.5.1
• chore(deps-minor) Update dependency typescript to v5.4.5
• chore(deps-minor) Update dependency webpack to v5.91.0 (webpack, @types/webpack)
• chore(deps-minor) Update dependency webpack-bundle-analyzer to v4.10.2
• chore(deps-minor) Update dependency webpack-merge to v5.10.0
• chore(deps-minor) Update dependency yup to v1.4.0
• chore(deps-minor) Update material-ui monorepo (@mui/material, @mui/styled-engine)
• chore(deps-minor) Update react monorepo (@types/react, @types/react-dom, eslint-plugin-react-hooks, react, react-dom)
• chore(deps-minor) Update sentry-javascript monorepo to v7.113.0 (@sentry/react, @sentry/tracing)
• chore(deps-minor) Update typescript-eslint monorepo to v7.8.0 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• chore(deps-major) Update dependency @graphql-codegen/cli to v5
• chore(deps-major) Update dependency apollo-upload-client to v18 (apollo-upload-client, @types/apollo-upload-client)
• chore(deps-major) Update dependency eslint to v9
• chore(deps-major) Update testing-library monorepo (major) (@testing-library/dom, @testing-library/react)

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps) Update dependency glob to v10.3.12
• chore(deps) Update emotion monorepo (@emotion/react, @emotion/styled)
• chore(deps) Update testing-library monorepo (@testing-library/jest-dom, @testing-library/react)
• chore(deps-minor) Update dependency @parcel/watcher to v2.4.1
• chore(deps-minor) Update dependency css-loader to v6.11.0
• chore(deps-minor) Update dependency sanitize-html to v2.13.0 (sanitize-html, @types/sanitize-html)
• chore(deps-minor) Update postgres Docker tag to v14.11
• chore(deps-major) Update dependency @date-io/luxon to v3
• chore(deps-major) Update dependency @mui/x-date-pickers to v7
• chore(deps-major) Update dependency css-loader to v7
• chore(deps-major) Update dependency style-loader to v4
• chore(deps-major) Update docker/build-push-action action to v5
• chore(deps-major) Update peter-evans/repository-dispatch action to v3
• 🔐 Create all rate-limited PRs at once 🔐

Pending Status Checks

These updates await pending status checks. To force their creation now, click the checkbox below.

• chore(deps) Update dependency @types/prismjs to v1.26.4
• chore(deps-minor) Update nginx Docker tag to v1.26

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps-minor) Update dependency prettier to v3.2.5

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps-major) Update dependency styled-components to v6
• chore(deps-major) Update postgres Docker tag to v16
• chore(deps-major) Update redis Docker tag to v7

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

• When I'm clicking on an existing billable metric, I should be redirected to the billable metric edition screen
  https://user-images.githubusercontent.com/82527978/163581148-a3367d9e-2f6d-4ad4-bcd7-d1d20f5d9f3d.mp4

• When a billable metric is linked to a subscription, the button delete should be disabled + having a tooltip when hovering explaining with the button is disabled

• As the edit a plan is not done, we can't check the behaviour of the edition of a BM in a plan, I'll do it when it's QA'able

Product issue - https://github.com/getlago/lago-product/issues/5

• When I'm on the webhooks section, the Developper item in the navigation is not selected anymore, it should be selected https://user-images.githubusercontent.com/82527978/166656027-fe1d502f-d4ce-4c71-85b5-77df118a6be5.mp4

• Seen with Morguy on a call - URL should be developpers/xxx and not settings/xxx

List view - empty state

• The button should hug the content and not have a fixed width.
  

• Got the feeling it's not following the font size of the empty state, it should be subhead and not headline for empty state and error state (for Plans and Billable metrics sections)
  

• The icon for the empty state of plans is not the good one, seen with Morgane, let's display a web-spider emoji image. you can find it here
  

• The button should be a medium-one and not a large one (for empty state and error state accross the app) + the wording wasn't good in the design, it's now up to date.
  

Create a plan

• the spacing between the title and the description should be 4px and not 32px (same feedback for create a billable metric flow)
  

• The top bar got a wrong wording Plans, it should be Add a plan
  

• When adding a billable metric to the plan, the parenthesis should be the same color of the billable_metric_code, in grey600
  

• When adding a new billable metric in the plan, when the dialog is disapearing, can we put the screen at the position of the billable metric posiition ? Right now I've to scroll and loose the context of what I'm doing.
  https://user-images.githubusercontent.com/82527978/161769524-ac40a9b9-5182-4269-ba4c-82b0be89a353.mp4

Changes not inclued in the spec

• By default, can we set plan pro-rata on on mode, not the charges one. See design here

• We're adding a new option in the plan definition, now user can also decide when the plan should be billed, in arreas vs. in advance

• When I'm adding a gradutated charge with or without decimal, I can't Create my Plan
  https://user-images.githubusercontent.com/82527978/170704901-e18e8afe-a870-4265-a7f1-52ba1b7339b6.mp4

• Filled disabled text field should be grey 600
• Any code field should replace spaces by '_' (billable metrics + plan)

• In the coupon's list view, when a coupon is set without ending date, it mentions forever, in the design it's mentioning No ending date
  

• The code snippet is missing in the creation and edition of a coupon, I guess back-end should provide it? Just to double check with you about it
  

This issue provides visibility into Renovate updates and their statuses. Learn more

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps) Update dependency @types/react-dom to v17.0.16
• chore(deps) Update dependency fork-ts-checker-webpack-plugin to v7.2.7
• chore(deps) Update dependency ts-loader to v9.2.9
• chore(deps-minor) Update dependency react-router-dom to v6.3.0
• chore(deps-minor) Update dependency sanitize-html to v2.7.0
• chore(deps-minor) Update dependency ts-jest to v27.1.4
• chore(deps-minor) Update dependency typescript to v4.6.3
• chore(deps-minor) Update dependency webpack to v5.72.0
• chore(deps-minor) Update dependency webpack-dev-server to v4.8.1
• chore(deps-minor) Update jest monorepo (@types/jest, jest)
• chore(deps-minor) Update material-ui monorepo (@mui/material, @mui/styled-engine, @mui/styled-engine-sc)
• chore(deps-minor) Update typescript-eslint monorepo to v5.21.0 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• chore(deps-major) Update Node.js to v18
• chore(deps-major) Update actions/checkout action
• chore(deps-major) Update actions/setup-node action to v3
• chore(deps-major) Update dependency @testing-library/react to v13
• chore(deps-major) Update dependency @testing-library/react-hooks to v8
• chore(deps-major) Update dependency @testing-library/user-event to v14
• chore(deps-major) Update dependency @types/react to v18
• chore(deps-major) Update dependency @types/react-dom to v18
• chore(deps-major) Update dependency apollo-upload-client to v17
• chore(deps-major) Update dependency jest to v28
• chore(deps-major) Update react monorepo to v18 (major) (react, react-dom)
• chore(deps-major) Update wearerequired/lint-action action to v2

Pending Status Checks

These updates await pending status checks. To force their creation now, click the checkbox below.

• chore(deps) Update babel monorepo (@babel/core, babel-loader)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps-minor) Update Apollo GraphQL packages (@apollo/client, apollo3-cache-persist)
• chore(deps-minor) Update dependency eslint-plugin-react-hooks to v4.5.0

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps) Update dependency @testing-library/react to v12.1.5
• chore(deps) Update dependency @types/lodash to v4.14.182

• Check this box to trigger a request for Renovate to run again on this repository

Describe the bug
When I click on a link with cmd+click it opens the link in the same tab

Expected behavior
It should open the link in a new tab

##32
#[BUG] Dropdown not closing on clickable items #32

• The current subscription icon feels weird. Moreover, we have 2 icons in the final design, so make sure Design is aligned with the final decision

Product issue link: https://github.com/getlago/lago-product/issues/4

• When I open the aggregation type combo-box menu, the item should be sort by alphabetical order -> Count / Count unique / Max / Sum

• When I select Count unique / Max / Sum item and click on the property text-filed, don't fill it and click outside, I have an error state saying that the field should be filled video link here

• How can we test the fact that by choosing an aggregation option, it triggers the right code snippet?

• When I edit a billable metric linked to a subscription, the property to aggregate text-filled should be disabled

• input should be 320px width and content in it should be truncate if it's not fitting the input. Having an input of 358px is not following our design system rules of 8px. (see QA return here)

Describe the bug
1Password does not suggest to autofill the login information. This might be because the inputs are not within a <form> element.

To Reproduce
Go to https://app.getlago.com/login

See that it's not an option to use 1Password to fill the form

Expected behavior
The 1Password icon would be shown on the left side of the input, allowing it to be used for the site

Screenshots

Additional context