Skip to content

Commit

Permalink
misc: some TW migration and refactor (#1938)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ansmonjol
ansmonjol authored Dec 24, 2024
1 parent 48cbbc5 commit d744e97
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 112 deletions.
35 changes: 7 additions & 28 deletions src/components/OrganizationLogoPicker.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { useRef, useState } from 'react'
import styled from 'styled-components'

import { Avatar, Button, Typography } from '~/components/designSystem'
import { useInternationalization } from '~/hooks/core/useInternationalization'
import { useOrganizationInfos } from '~/hooks/useOrganizationInfos'
import { theme } from '~/styles'
import { tw } from '~/styles/utils'

interface OrganizationLogoPickerProps {
logoValue?: string
Expand Down Expand Up @@ -43,7 +42,7 @@ export const OrganizationLogoPicker = ({
}

return (
<Container className={className}>
<div className={tw('flex gap-4', className)}>
{logoValue || organization?.logoUrl ? (
<Avatar size="large" variant="connector">
<img
Expand All @@ -61,7 +60,7 @@ export const OrganizationLogoPicker = ({
.reduce((acc, n) => (acc = acc + n[0]), '')}
/>
)}
<AvatarUploadWrapper>
<div className="flex flex-col gap-2">
<Button
className="w-fit"
variant="secondary"
Expand All @@ -74,8 +73,9 @@ export const OrganizationLogoPicker = ({
? translate('text_62ab2d0396dd6b0361614d1e')
: translate('text_62ab2d0396dd6b0361614d20')}
</Typography>
</AvatarUploadWrapper>
<HiddenInput
</div>
<input
className="hidden"
type="file"
accept="image/png, image/jpeg"
ref={hiddenFileInputRef}
Expand All @@ -88,27 +88,6 @@ export const OrganizationLogoPicker = ({
}
}}
/>
</Container>
</div>
)
}

const Container = styled.div`
display: flex;
> *:first-child {
margin-right: ${theme.spacing(4)};
}
`

const AvatarUploadWrapper = styled.div`
display: flex;
flex-direction: column;
> button {
margin-bottom: ${theme.spacing(2)};
}
`

const HiddenInput = styled.input`
display: none;
`
53 changes: 17 additions & 36 deletions src/components/customers/subscriptions/SubscriptionItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { gql } from '@apollo/client'
import { RefObject } from 'react'
import styled from 'styled-components'
import { PropsWithChildren, RefObject } from 'react'

import { Skeleton, Typography } from '~/components/designSystem'
import {
Expand All @@ -11,7 +10,6 @@ import {
} from '~/generated/graphql'
import { useInternationalization } from '~/hooks/core/useInternationalization'
import { useOrganizationInfos } from '~/hooks/useOrganizationInfos'
import { HEADER_TABLE_HEIGHT, NAV_HEIGHT, theme } from '~/styles'

import { SubscriptionLine } from './SubscriptionLine'
import { TerminateCustomerSubscriptionDialogRef } from './TerminateCustomerSubscriptionDialog'
Expand Down Expand Up @@ -41,6 +39,12 @@ gql`
${SubscriptionLinePlanFragmentDoc}
`

const DateInfos = ({ children }: PropsWithChildren) => (
<Typography variant="caption" className="flex h-12 items-center justify-end px-4">
{children}
</Typography>
)

interface SubscriptionItemProps {
subscription: SubscriptionItemFragment
customerTimezone?: TimezoneEnum
Expand Down Expand Up @@ -74,7 +78,10 @@ export const SubscriptionItem = ({
if (!subscription) return null

return (
<SubscriptionContainer key={id}>
<div
className="rounded-xl border border-solid border-grey-400 not-last-child:shadow-b"
key={id}
>
{isDowngrading && (
<SubscriptionLine
terminateSubscriptionDialogRef={terminateSubscriptionDialogRef}
Expand Down Expand Up @@ -102,67 +109,41 @@ export const SubscriptionItem = ({
customerTimezone={customerTimezone}
/>
{isDowngrading ? (
<DateInfos variant="caption">
<DateInfos>
{translate('text_62681c60582e4f00aa82938a', {
planName: nextPlan?.name,
dateStartNewPlan: !nextPendingStartDate ? '-' : formatTimeOrgaTZ(nextPendingStartDate),
})}
</DateInfos>
) : isPending ? (
<DateInfos variant="caption">
<DateInfos>
{translate('text_6335e50b0b089e1d8ed50960', {
planName: plan?.name,
startDate: formatTimeOrgaTZ(subscriptionAt),
})}
</DateInfos>
) : hasEndingAtForActive ? (
<DateInfos variant="caption">
<DateInfos>
{translate('text_64ef55a730b88e3d2117b44e', {
planName: plan?.name,
date: formatTimeOrgaTZ(endingAt),
})}
</DateInfos>
) : null}
</SubscriptionContainer>
</div>
)
}

SubscriptionItem.displayName = 'SubscriptionItem'

export const SubscriptionItemSkeleton = () => {
return (
<SkeletonItem>
<div className="flex h-18 items-center rounded-xl border border-solid border-grey-400 px-4">
<Skeleton variant="connectorAvatar" size="big" className="mr-3" />
<div>
<Skeleton variant="text" className="mb-3 w-60" />
<Skeleton variant="text" className="w-30" />
</div>
</SkeletonItem>
</div>
)
}

const SkeletonItem = styled.div`
border: 1px solid ${theme.palette.grey[400]};
height: ${NAV_HEIGHT}px;
align-items: center;
display: flex;
padding: 0 ${theme.spacing(4)};
border-radius: 12px;
`

const SubscriptionContainer = styled.div`
border: 1px solid ${theme.palette.grey[400]};
border-radius: 12px;
> *:not(:last-child) {
box-shadow: ${theme.shadows[7]};
}
`

const DateInfos = styled(Typography)`
height: ${HEADER_TABLE_HEIGHT}px;
display: flex;
align-items: center;
justify-content: end;
padding: 0 ${theme.spacing(4)};
`
55 changes: 9 additions & 46 deletions src/components/customers/usage/CustomerUsage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,16 @@
import { gql } from '@apollo/client'
import { RefObject, useState } from 'react'
import { generatePath, useParams } from 'react-router-dom'
import styled, { css } from 'styled-components'
import { useParams } from 'react-router-dom'

import { Alert, Typography } from '~/components/designSystem'
import Gross from '~/components/graphs/Gross'
import MonthSelectorDropdown, {
AnalyticsPeriodScopeEnum,
TPeriodScopeTranslationLookupValue,
} from '~/components/graphs/MonthSelectorDropdown'
import { PremiumWarningDialogRef } from '~/components/PremiumWarningDialog'
import { CUSTOMER_DETAILS_TAB_ROUTE } from '~/core/router'
import { useGetCustomerSubscriptionForUsageQuery } from '~/generated/graphql'
import { useInternationalization } from '~/hooks/core/useInternationalization'
import { useOrganizationInfos } from '~/hooks/useOrganizationInfos'
import { CustomerDetailsTabsOptions } from '~/pages/CustomerDetails'
import { NAV_HEIGHT, theme } from '~/styles'
import { SectionHeader } from '~/styles/customer'

gql`
Expand All @@ -39,7 +34,7 @@ export const CustomerUsage = ({ premiumWarningDialogRef }: CustomerUsageProps) =
const [periodScope, setPeriodScope] = useState<TPeriodScopeTranslationLookupValue>(
AnalyticsPeriodScopeEnum.Year,
)
const { data, loading } = useGetCustomerSubscriptionForUsageQuery({
const { data } = useGetCustomerSubscriptionForUsageQuery({
variables: { id: customerId },
skip: !customerId,
})
Expand All @@ -56,45 +51,13 @@ export const CustomerUsage = ({ premiumWarningDialogRef }: CustomerUsageProps) =
/>
</SectionHeader>

<GrossGraphWrapper $showDivider={loading}>
<Gross
// eslint-disable-next-line tailwindcss/no-custom-classname
className="analytics-graph"
currency={data?.customer?.currency || organization?.defaultCurrency}
period={periodScope}
externalCustomerId={data?.customer?.externalId}
/>
</GrossGraphWrapper>

<Title variant="subhead">{translate('text_62c3f3fca8a1625624e8337b')}</Title>
<Alert type="info">
<Typography
variant="body"
color="grey700"
html={translate('text_1725983967306v77yaw6dtm1', {
link: generatePath(CUSTOMER_DETAILS_TAB_ROUTE, {
customerId,
tab: CustomerDetailsTabsOptions.overview,
}),
})}
/>
</Alert>
<Gross
// eslint-disable-next-line tailwindcss/no-custom-classname
className="analytics-graph"
currency={data?.customer?.currency || organization?.defaultCurrency}
period={periodScope}
externalCustomerId={data?.customer?.externalId}
/>
</div>
)
}

const Title = styled(Typography)`
height: ${NAV_HEIGHT}px;
display: flex;
justify-content: space-between;
align-items: center;
`

const GrossGraphWrapper = styled.div<{ $showDivider: boolean }>`
${({ $showDivider }) =>
$showDivider &&
css`
border-bottom: 1px solid ${theme.palette.grey[300]};
margin-bottom: ${theme.spacing(8)};
`}
`
2 changes: 0 additions & 2 deletions translations/base.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1822,7 +1822,6 @@
"text_6298bd525e359200d5ea0257": "The transaction ID is used as an idempotency key. It’s here to guarantee that the event is executed only once",
"text_6298bd525e359200d5ea01b7": "This event code doesn’t match an existing billable metric",
"text_6298bd525e359200d5ea0197": "The property sent doesn’t match the one used to aggregate your billable metric.",
"text_62c3f3fca8a1625624e8337b": "Current usage report",
"text_62c3f3fca8a1625624e83380": "Total current usage",
"text_62c3f3fca8a1625624e83379": "Something went wrong",
"text_62c3f3fca8a1625624e8337e": "Please refresh the page or contact us if the error persists.",
Expand Down Expand Up @@ -2361,7 +2360,6 @@
"text_17261289386318j0nhr1ms3t": "Search or select a customer type",
"text_1726129457108txzr4gdkvcz": "Individual",
"text_1726129457108raohiy4kkt3": "Company",
"text_1725983967306v77yaw6dtm1": "Click on a <a href=\"{{link}}\">subscription</a> details to view its current usage.",
"text_1725983967306cf8dwr2r4u2": "Current usage",
"text_1725983967306qz0npfuhlo1": "Refresh this section",
"text_1725983967306dtwnapp4mw9": "Charge name",
Expand Down

0 comments on commit d744e97

Please sign in to comment.