feat: 👻 QA fix

Multiple plan
getlago · Aug 8, 2022 · 6e4fa05 · 6e4fa05
1 parent c500a74
commit 6e4fa05
Show file tree

Hide file tree

Showing 5 changed files with 225 additions and 23 deletions.
diff --git a/ditto/base.json b/ditto/base.json
@@ -559,23 +559,23 @@
   "text_624ea7c29103fd010732ab7d": "Enter a number to move forward (use “.” for decimal)",
   "text_62d7f6178ec94cd09370e5fb": "Status",
   "text_62d7f6178ec94cd09370e6cf": "Edit, terminate & more",
-  "text_62d7f6178ec94cd09370e63c": "Edit display name",
+  "text_62d7f6178ec94cd09370e63c": "Edit subscription name",
   "text_62d7f6178ec94cd09370e64a": "Change plan",
   "text_62d7f6178ec94cd09370e65b": "Copy subscription_id",
   "text_62d904b97e690a881f2b867c": "Terminate subscription",
   "text_62d94cc9ccc5eebcc03160a0": "Subscription_id copied to clipboard",
-  "text_62d7f6178ec94cd09370e2b9": "Invoice display name (optional)",
-  "text_62d7f6178ec94cd09370e2cb": "Type a display name",
+  "text_62d7f6178ec94cd09370e2b9": "Subscription name (optional)",
+  "text_62d7f6178ec94cd09370e2cb": "Type a subscription name",
   "text_62d7f6178ec94cd09370e2d9": "This value can be used to differentiate plans",
-  "text_62d7f6178ec94cd09370e393": "Type a display name",
+  "text_62d7f6178ec94cd09370e393": "Type a subscription name",
   "text_62d7f6178ec94cd09370e3d1": "Downgrading plan will be applied at the end of the current billable period.",
   "text_62d7f6178ec94cd09370e69a": "Plan successfully changed",
-  "text_62d7f6178ec94cd09370e2f1": "Edit invoice display name",
+  "text_62d7f6178ec94cd09370e2f1": "Edit subscription name",
   "text_62d7f6178ec94cd09370e311": "This value can be used to differentiate same plans.",
-  "text_62d7f6178ec94cd09370e32d": "Invoice display name",
+  "text_62d7f6178ec94cd09370e32d": "Subscription name (optional)",
   "text_62d7f6178ec94cd09370e34d": "Cancel",
-  "text_62d7f6178ec94cd09370e353": "Edit display name",
-  "text_62d7f6178ec94cd09370e6ab": "Display name successfully edited",
+  "text_62d7f6178ec94cd09370e353": "Edit subscription name",
+  "text_62e38a4631937146a6d6d5dd": "Subscription name successfully edited",
   "text_62d7f6178ec94cd09370e2f3": "Terminate subscription?",
   "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?",
   "text_62d7f6178ec94cd09370e351": "Terminate subscription",

diff --git a/src/components/customers/subscriptions/EditCustomerSubscriptionDialog.tsx b/src/components/customers/subscriptions/EditCustomerSubscriptionDialog.tsx
@@ -32,7 +32,7 @@ export const EditCustomerSubscriptionDialog = forwardRef<EditCustomerSubscriptio
         if (!!updateSubscription) {
           addToast({
             severity: 'success',
-            translateKey: 'text_62d7f6178ec94cd09370e6ab',
+            translateKey: 'text_62e38a4631937146a6d6d5dd',
           })
         }
       },

diff --git a/src/components/customers/usage/UsageItem.tsx b/src/components/customers/usage/UsageItem.tsx
@@ -74,15 +74,18 @@ export const UsageItem = ({ customerId, subscription }: UsageItemProps) => {
             <Icon name="pulse" color="dark" />
           </StyledAvatar>
           <Title>
-            <Typography variant="bodyHl" color="textSecondary">
+            <Typography variant="bodyHl" color="textSecondary" noWrap>
               {name || plan?.name}
             </Typography>
-            <Typography variant="caption">{plan?.code}</Typography>
+            <Typography variant="caption" noWrap>
+              {plan?.code}
+            </Typography>
           </Title>
           <Tooltip placement="top-start" title={translate('text_62d7f6178ec94cd09370e4b3')}>
             <Button
               variant="quaternary"
               icon="reload"
+              size="small"
               onClick={async (e) => {
                 e.preventDefault()
                 e.stopPropagation()
@@ -228,6 +231,7 @@ const Container = styled.div`
 
 const StyledAccordion = styled(Accordion)`
   border-radius: 12px;
+  overflow: hidden;
 
   &.MuiAccordion-root.MuiPaper-root {
     border-radius: 12px;
@@ -247,18 +251,24 @@ const StyledAccordion = styled(Accordion)`
 
 const Summary = styled(AccordionSummary)`
   && {
-    height: 60px;
+    height: ${NAV_HEIGHT}px;
     border-radius: 12px;
 
     &.MuiAccordionSummary-root.Mui-focused {
       border-radius: 12px;
     }
 
     .MuiAccordionSummary-content {
+      height: ${NAV_HEIGHT}px;
+      box-sizing: border-box;
       display: flex;
       align-items: center;
       padding: ${theme.spacing(4)};
 
+      &:hover {
+        background-color: ${theme.palette.grey[100]};
+      }
+
       > *:first-child {
         margin-right: ${theme.spacing(3)};
       }
@@ -274,6 +284,7 @@ const Title = styled.div`
   display: flex;
   flex-direction: column;
   margin-right: auto;
+  min-width: 20px;
 `
 
 const Details = styled(AccordionDetails)`
@@ -326,6 +337,7 @@ const Line = styled.div`
   justify-content: space-between;
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
 
   > *:first-child {
     margin-right: ${theme.spacing(3)};

diff --git a/src/components/plans/ChargeAccordion.tsx b/src/components/plans/ChargeAccordion.tsx
@@ -3,7 +3,7 @@ import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material'
 import { FormikProps } from 'formik'
 import styled from 'styled-components'
 
-import { theme } from '~/styles'
+import { theme, NAV_HEIGHT } from '~/styles'
 import { Button, Typography, Tooltip } from '~/components/designSystem'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { ChargeModelEnum, CurrencyEnum } from '~/generated/graphql'
@@ -61,9 +61,13 @@ export const ChargeAccordion = ({
               icon={isOpen ? 'chevron-down' : 'chevron-right'}
             />
           </Tooltip>
-          <Title color="textSecondary">
-            {localCharge?.billableMetric?.name}{' '}
-            <Typography>({localCharge?.billableMetric?.code})</Typography>
+          <Title>
+            <Typography variant="bodyHl" color="textSecondary" noWrap>
+              {localCharge?.billableMetric?.name}
+            </Typography>
+            <Typography variant="caption" noWrap>
+              {localCharge?.billableMetric?.code}
+            </Typography>
           </Title>
           {!disabled && (
             <Tooltip placement="top-end" title={translate('text_624aa732d6af4e0103d40e65')}>
@@ -170,6 +174,7 @@ const Container = styled.div`
 
 const StyledAccordion = styled(Accordion)`
   border-radius: 12px;
+  overflow: hidden;
 
   &.MuiAccordion-root.MuiPaper-root {
     border-radius: 12px;
@@ -189,7 +194,7 @@ const StyledAccordion = styled(Accordion)`
 
 const Summary = styled(AccordionSummary)`
   && {
-    height: 60px;
+    height: ${NAV_HEIGHT}px;
     border-radius: 12px;
 
     &.MuiAccordionSummary-root.Mui-focused {
@@ -198,25 +203,26 @@ const Summary = styled(AccordionSummary)`
 
     .MuiAccordionSummary-content {
       display: flex;
+      height: ${NAV_HEIGHT}px;
+      box-sizing: border-box;
       align-items: center;
       padding: ${theme.spacing(4)};
 
+      &:hover {
+        background-color: ${theme.palette.grey[100]};
+      }
+
       > *:first-child {
         margin-right: ${theme.spacing(4)};
       }
     }
   }
 `
 
-const Title = styled(Typography)`
-  display: flex;
-  margin-right: auto;
-  white-space: pre;
-`
-
 const Details = styled(AccordionDetails)`
   display: flex;
   flex-direction: column;
+  box-shadow: ${theme.shadows[5]};
 
   &.MuiAccordionDetails-root {
     padding: ${theme.spacing(4)} ${theme.spacing(4)} 0 ${theme.spacing(4)};
@@ -227,6 +233,13 @@ const Details = styled(AccordionDetails)`
   }
 `
 
+const Title = styled.div`
+  display: flex;
+  flex-direction: column;
+  white-space: pre;
+  min-width: 20px;
+`
+
 const LineAmount = styled.div`
   display: flex;