Skip to content

Commit 6e4fa05

Browse files
MorganeLecurieuxMorganeLecurieux
committed
feat: 👻 QA fix
Multiple plan
1 parent c500a74 commit 6e4fa05

File tree

5 files changed

+225
-23
lines changed

5 files changed

+225
-23
lines changed

‎ditto/base.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -559,23 +559,23 @@
559559
"text_624ea7c29103fd010732ab7d": "Enter a number to move forward (use “.” for decimal)",
560560
"text_62d7f6178ec94cd09370e5fb": "Status",
561561
"text_62d7f6178ec94cd09370e6cf": "Edit, terminate & more",
562-
"text_62d7f6178ec94cd09370e63c": "Edit display name",
562+
"text_62d7f6178ec94cd09370e63c": "Edit subscription name",
563563
"text_62d7f6178ec94cd09370e64a": "Change plan",
564564
"text_62d7f6178ec94cd09370e65b": "Copy subscription_id",
565565
"text_62d904b97e690a881f2b867c": "Terminate subscription",
566566
"text_62d94cc9ccc5eebcc03160a0": "Subscription_id copied to clipboard",
567-
"text_62d7f6178ec94cd09370e2b9": "Invoice display name (optional)",
568-
"text_62d7f6178ec94cd09370e2cb": "Type a display name",
567+
"text_62d7f6178ec94cd09370e2b9": "Subscription name (optional)",
568+
"text_62d7f6178ec94cd09370e2cb": "Type a subscription name",
569569
"text_62d7f6178ec94cd09370e2d9": "This value can be used to differentiate plans",
570-
"text_62d7f6178ec94cd09370e393": "Type a display name",
570+
"text_62d7f6178ec94cd09370e393": "Type a subscription name",
571571
"text_62d7f6178ec94cd09370e3d1": "Downgrading plan will be applied at the end of the current billable period.",
572572
"text_62d7f6178ec94cd09370e69a": "Plan successfully changed",
573-
"text_62d7f6178ec94cd09370e2f1": "Edit invoice display name",
573+
"text_62d7f6178ec94cd09370e2f1": "Edit subscription name",
574574
"text_62d7f6178ec94cd09370e311": "This value can be used to differentiate same plans.",
575-
"text_62d7f6178ec94cd09370e32d": "Invoice display name",
575+
"text_62d7f6178ec94cd09370e32d": "Subscription name (optional)",
576576
"text_62d7f6178ec94cd09370e34d": "Cancel",
577-
"text_62d7f6178ec94cd09370e353": "Edit display name",
578-
"text_62d7f6178ec94cd09370e6ab": "Display name successfully edited",
577+
"text_62d7f6178ec94cd09370e353": "Edit subscription name",
578+
"text_62e38a4631937146a6d6d5dd": "Subscription name successfully edited",
579579
"text_62d7f6178ec94cd09370e2f3": "Terminate subscription?",
580580
"text_62d7f6178ec94cd09370e313": "You’re about to terminate {{invoice_display_name}} subscription. Customer will pay usage fees and the pro-rata of the subscription fees. Are you sure?",
581581
"text_62d7f6178ec94cd09370e351": "Terminate subscription",

‎src/components/customers/subscriptions/EditCustomerSubscriptionDialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const EditCustomerSubscriptionDialog = forwardRef<EditCustomerSubscriptio
3232
if (!!updateSubscription) {
3333
addToast({
3434
severity: 'success',
35-
translateKey: 'text_62d7f6178ec94cd09370e6ab',
35+
translateKey: 'text_62e38a4631937146a6d6d5dd',
3636
})
3737
}
3838
},

‎src/components/customers/usage/UsageItem.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,15 +74,18 @@ export const UsageItem = ({ customerId, subscription }: UsageItemProps) => {
7474
<Icon name="pulse" color="dark" />
7575
</StyledAvatar>
7676
<Title>
77-
<Typography variant="bodyHl" color="textSecondary">
77+
<Typography variant="bodyHl" color="textSecondary" noWrap>
7878
{name || plan?.name}
7979
</Typography>
80-
<Typography variant="caption">{plan?.code}</Typography>
80+
<Typography variant="caption" noWrap>
81+
{plan?.code}
82+
</Typography>
8183
</Title>
8284
<Tooltip placement="top-start" title={translate('text_62d7f6178ec94cd09370e4b3')}>
8385
<Button
8486
variant="quaternary"
8587
icon="reload"
88+
size="small"
8689
onClick={async (e) => {
8790
e.preventDefault()
8891
e.stopPropagation()
@@ -228,6 +231,7 @@ const Container = styled.div`
228231

229232
const StyledAccordion = styled(Accordion)`
230233
border-radius: 12px;
234+
overflow: hidden;
231235
232236
&.MuiAccordion-root.MuiPaper-root {
233237
border-radius: 12px;
@@ -247,18 +251,24 @@ const StyledAccordion = styled(Accordion)`
247251

248252
const Summary = styled(AccordionSummary)`
249253
&& {
250-
height: 60px;
254+
height: ${NAV_HEIGHT}px;
251255
border-radius: 12px;
252256
253257
&.MuiAccordionSummary-root.Mui-focused {
254258
border-radius: 12px;
255259
}
256260
257261
.MuiAccordionSummary-content {
262+
height: ${NAV_HEIGHT}px;
263+
box-sizing: border-box;
258264
display: flex;
259265
align-items: center;
260266
padding: ${theme.spacing(4)};
261267
268+
&:hover {
269+
background-color: ${theme.palette.grey[100]};
270+
}
271+
262272
> *:first-child {
263273
margin-right: ${theme.spacing(3)};
264274
}
@@ -274,6 +284,7 @@ const Title = styled.div`
274284
display: flex;
275285
flex-direction: column;
276286
margin-right: auto;
287+
min-width: 20px;
277288
`
278289

279290
const Details = styled(AccordionDetails)`
@@ -326,6 +337,7 @@ const Line = styled.div`
326337
justify-content: space-between;
327338
display: flex;
328339
align-items: center;
340+
flex-wrap: wrap;
329341
330342
> *:first-child {
331343
margin-right: ${theme.spacing(3)};

‎src/components/plans/ChargeAccordion.tsx‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material'
33
import { FormikProps } from 'formik'
44
import styled from 'styled-components'
55

6-
import { theme } from '~/styles'
6+
import { theme, NAV_HEIGHT } from '~/styles'
77
import { Button, Typography, Tooltip } from '~/components/designSystem'
88
import { useInternationalization } from '~/hooks/core/useInternationalization'
99
import { ChargeModelEnum, CurrencyEnum } from '~/generated/graphql'
@@ -61,9 +61,13 @@ export const ChargeAccordion = ({
6161
icon={isOpen ? 'chevron-down' : 'chevron-right'}
6262
/>
6363
</Tooltip>
64-
<Title color="textSecondary">
65-
{localCharge?.billableMetric?.name}{' '}
66-
<Typography>({localCharge?.billableMetric?.code})</Typography>
64+
<Title>
65+
<Typography variant="bodyHl" color="textSecondary" noWrap>
66+
{localCharge?.billableMetric?.name}
67+
</Typography>
68+
<Typography variant="caption" noWrap>
69+
{localCharge?.billableMetric?.code}
70+
</Typography>
6771
</Title>
6872
{!disabled && (
6973
<Tooltip placement="top-end" title={translate('text_624aa732d6af4e0103d40e65')}>
@@ -170,6 +174,7 @@ const Container = styled.div`
170174

171175
const StyledAccordion = styled(Accordion)`
172176
border-radius: 12px;
177+
overflow: hidden;
173178
174179
&.MuiAccordion-root.MuiPaper-root {
175180
border-radius: 12px;
@@ -189,7 +194,7 @@ const StyledAccordion = styled(Accordion)`
189194

190195
const Summary = styled(AccordionSummary)`
191196
&& {
192-
height: 60px;
197+
height: ${NAV_HEIGHT}px;
193198
border-radius: 12px;
194199
195200
&.MuiAccordionSummary-root.Mui-focused {
@@ -198,25 +203,26 @@ const Summary = styled(AccordionSummary)`
198203
199204
.MuiAccordionSummary-content {
200205
display: flex;
206+
height: ${NAV_HEIGHT}px;
207+
box-sizing: border-box;
201208
align-items: center;
202209
padding: ${theme.spacing(4)};
203210
211+
&:hover {
212+
background-color: ${theme.palette.grey[100]};
213+
}
214+
204215
> *:first-child {
205216
margin-right: ${theme.spacing(4)};
206217
}
207218
}
208219
}
209220
`
210221

211-
const Title = styled(Typography)`
212-
display: flex;
213-
margin-right: auto;
214-
white-space: pre;
215-
`
216-
217222
const Details = styled(AccordionDetails)`
218223
display: flex;
219224
flex-direction: column;
225+
box-shadow: ${theme.shadows[5]};
220226
221227
&.MuiAccordionDetails-root {
222228
padding: ${theme.spacing(4)} ${theme.spacing(4)} 0 ${theme.spacing(4)};
@@ -227,6 +233,13 @@ const Details = styled(AccordionDetails)`
227233
}
228234
`
229235

236+
const Title = styled.div`
237+
display: flex;
238+
flex-direction: column;
239+
white-space: pre;
240+
min-width: 20px;
241+
`
242+
230243
const LineAmount = styled.div`
231244
display: flex;
232245

0 commit comments

Comments
 (0)