From 384d985c84535ea4449f1061db9472646c51117d Mon Sep 17 00:00:00 2001 From: Kelly Phan Date: Wed, 26 Feb 2025 15:08:17 +0100 Subject: [PATCH 1/4] refactor: tw migration --- .../EditOrganizationInformationsDialog.tsx | 114 +++++++----------- .../EditOrganizationTimezoneDialog.tsx | 10 +- .../settings/authentication/AddOktaDialog.tsx | 14 +-- .../settings/integrations/AddAdyenDialog.tsx | 31 +---- .../settings/integrations/AddAnrokDialog.tsx | 31 +---- .../integrations/AddGocardlessDialog.tsx | 57 +++------ .../AddLagoTaxManagementDialog.tsx | 14 +-- .../integrations/AddNetsuiteDialog.tsx | 19 +-- .../settings/integrations/AddStripeDialog.tsx | 31 +---- .../settings/integrations/AddXeroDialog.tsx | 19 +-- .../AnrokIntegrationItemsList.tsx | 16 +-- .../integrations/IntegrationItemHeader.tsx | 18 +-- .../integrations/IntegrationItemLine.tsx | 64 ++-------- .../NetsuiteIntegrationItemsList.tsx | 16 +-- .../integrations/XeroIntegrationItemsList.tsx | 16 +-- .../XeroIntegrationMapItemDialog.tsx | 59 +++------ .../invoices/AddOrganizationVatRateDialog.tsx | 10 +- .../invoices/EditDefaultCurrencyDialog.tsx | 20 +-- .../EditFinalizeZeroAmountInvoiceDialog.tsx | 20 +-- .../invoices/EditNetPaymentTermDialog.tsx | 20 +-- .../EditOrganizationDocumentLocaleDialog.tsx | 10 +- .../EditOrganizationGracePeriodDialog.tsx | 10 +- ...EditOrganizationInvoiceNumberingDialog.tsx | 59 ++------- .../EditOrganizationInvoiceTemplateDialog.tsx | 31 +---- .../settings/members/CreateInviteDialog.tsx | 32 ++--- .../settings/members/EditInviteRoleDialog.tsx | 50 +++----- .../settings/members/EditMemberRoleDialog.tsx | 58 +++------ .../settings/members/RolePickerField.tsx | 16 +-- 28 files changed, 208 insertions(+), 657 deletions(-) diff --git a/src/components/settings/EditOrganizationInformationsDialog.tsx b/src/components/settings/EditOrganizationInformationsDialog.tsx index 92c439bf3..7f351bd4c 100644 --- a/src/components/settings/EditOrganizationInformationsDialog.tsx +++ b/src/components/settings/EditOrganizationInformationsDialog.tsx @@ -1,7 +1,6 @@ import { gql } from '@apollo/client' import { useFormik } from 'formik' import { forwardRef, useState } from 'react' -import styled from 'styled-components' import { object, string } from 'yup' import { Button, Dialog, DialogRef } from '~/components/designSystem' @@ -16,7 +15,6 @@ import { useUpdateOrganizationInformationsMutation, } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' -import { theme } from '~/styles' gql` fragment EditOrganizationInformationsDialog on CurrentOrganization { @@ -122,55 +120,49 @@ export const EditOrganizationInformationsDialog = forwardRef< )} > - - - setLogo(value)} /> - - - - - - - - - - - - - - - - - +
+ setLogo(value)} /> + + + + + + + + + + + +
- - +
+
) }) -const Content = styled.div` - margin-bottom: ${theme.spacing(8)}; -` - -const FormSection = styled.div` - &:not(:last-child) { - margin-bottom: ${theme.spacing(6)}; - } -` - -const AddressSection = styled.div` - > * { - margin-bottom: ${theme.spacing(4)}; - } -` - EditOrganizationInformationsDialog.displayName = 'forwardRef' diff --git a/src/components/settings/EditOrganizationTimezoneDialog.tsx b/src/components/settings/EditOrganizationTimezoneDialog.tsx index fd4581c89..174a6af36 100644 --- a/src/components/settings/EditOrganizationTimezoneDialog.tsx +++ b/src/components/settings/EditOrganizationTimezoneDialog.tsx @@ -2,7 +2,6 @@ import { gql } from '@apollo/client' import { useFormik } from 'formik' import { Settings } from 'luxon' import { forwardRef } from 'react' -import styled from 'styled-components' import { object, string } from 'yup' import { Button, Dialog, DialogRef } from '~/components/designSystem' @@ -11,7 +10,6 @@ import { addToast } from '~/core/apolloClient' import { getTimezoneConfig } from '~/core/timezone' import { TimezoneEnum, useUpdateOrganizationTimezoneMutation } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' -import { theme } from '~/styles' gql` mutation updateOrganizationTimezone($input: UpdateOrganizationInput!) { @@ -90,7 +88,7 @@ export const EditOrganizationTimezoneDialog = forwardRef< )} > - +
- +
) }) -const Content = styled.div` - margin-bottom: ${theme.spacing(8)}; -` - EditOrganizationTimezoneDialog.displayName = 'EditOrganizationTimezoneDialog' diff --git a/src/components/settings/authentication/AddOktaDialog.tsx b/src/components/settings/authentication/AddOktaDialog.tsx index fe0086efd..d8d33b60b 100644 --- a/src/components/settings/authentication/AddOktaDialog.tsx +++ b/src/components/settings/authentication/AddOktaDialog.tsx @@ -1,6 +1,5 @@ import { InputAdornment, Stack } from '@mui/material' import { forwardRef, RefObject, useImperativeHandle, useRef, useState } from 'react' -import styled from 'styled-components' import { Button, Dialog, DialogRef } from '~/components/designSystem' import { TextInputField } from '~/components/form' @@ -11,7 +10,6 @@ import { } from '~/components/settings/authentication/useOktaIntegration' import { AddOktaIntegrationDialogFragment } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' -import { theme } from '~/styles' type AddOktaDialogProps = Partial<{ integration: AddOktaIntegrationDialogFragment @@ -102,7 +100,7 @@ export const AddOktaDialog = forwardRef((_, ref) => { )} > - +
((_, ref) => { ), }} /> - +
) }) -const Content = styled.div` - margin-bottom: ${theme.spacing(8)}; - - > *:not(:last-child) { - margin-bottom: ${theme.spacing(6)}; - } -` - AddOktaDialog.displayName = 'AddOktaDialog' diff --git a/src/components/settings/integrations/AddAdyenDialog.tsx b/src/components/settings/integrations/AddAdyenDialog.tsx index 651b65c05..4b8e7e05d 100644 --- a/src/components/settings/integrations/AddAdyenDialog.tsx +++ b/src/components/settings/integrations/AddAdyenDialog.tsx @@ -4,7 +4,6 @@ import { useFormik } from 'formik' import { forwardRef, RefObject, useImperativeHandle, useRef, useState } from 'react' import { useNavigate } from 'react-router' import { generatePath } from 'react-router-dom' -import styled from 'styled-components' import { object, string } from 'yup' import { Button, Dialog, DialogRef } from '~/components/designSystem' @@ -22,7 +21,6 @@ import { useUpdateAdyenApiKeyMutation, } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' -import { theme } from '~/styles' import { DeleteAdyenIntegrationDialogRef } from './DeleteAdyenIntegrationDialog' @@ -244,9 +242,10 @@ export const AddAdyenDialog = forwardRef((_, ref) => { )} > - - +
+
((_, ref) => { placeholder={translate('text_6584550dc4cec7adf861504f')} /> - +
((_, ref) => { formikProps={formikProps} /> )} - +
) }) -const Content = styled.div` - margin-bottom: ${theme.spacing(8)}; - - > *:not(:last-child) { - margin-bottom: ${theme.spacing(6)}; - } -` - -const InlineInputs = styled.div` - display: flex; - flex-direction: row; - align-items: flex-start; - gap: ${theme.spacing(6)}; - - > * { - flex: 1; - } -` - AddAdyenDialog.displayName = 'AddAdyenDialog' diff --git a/src/components/settings/integrations/AddAnrokDialog.tsx b/src/components/settings/integrations/AddAnrokDialog.tsx index 22004d17d..6ffb2f514 100644 --- a/src/components/settings/integrations/AddAnrokDialog.tsx +++ b/src/components/settings/integrations/AddAnrokDialog.tsx @@ -4,7 +4,6 @@ import { useFormik } from 'formik' import { forwardRef, RefObject, useId, useImperativeHandle, useRef, useState } from 'react' import { useNavigate } from 'react-router' import { generatePath } from 'react-router-dom' -import styled from 'styled-components' import { object, string } from 'yup' import { Button, Dialog, DialogRef } from '~/components/designSystem' @@ -24,7 +23,6 @@ import { } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' import { AnrokIntegrationDetailsTabs } from '~/pages/settings/AnrokIntegrationDetails' -import { theme } from '~/styles' import { DeleteAnrokIntegrationDialogRef } from './DeleteAnrokIntegrationDialog' @@ -232,9 +230,10 @@ export const AddAnrokDialog = forwardRef((_, ref) => { )} > - - +
+
((_, ref) => { placeholder={translate('text_6584550dc4cec7adf861504f')} /> - +
((_, ref) => { placeholder={translate('text_666887f6c4d092aa1e1a847e')} formikProps={formikProps} /> - +
) }) -const Content = styled.div` - margin-bottom: ${theme.spacing(8)}; - - > *:not(:last-child) { - margin-bottom: ${theme.spacing(6)}; - } -` - -const InlineInputs = styled.div` - display: flex; - flex-direction: row; - align-items: flex-start; - gap: ${theme.spacing(6)}; - - > * { - flex: 1; - } -` - AddAnrokDialog.displayName = 'AddAnrokDialog' diff --git a/src/components/settings/integrations/AddGocardlessDialog.tsx b/src/components/settings/integrations/AddGocardlessDialog.tsx index 2ecc37ebf..3b6811095 100644 --- a/src/components/settings/integrations/AddGocardlessDialog.tsx +++ b/src/components/settings/integrations/AddGocardlessDialog.tsx @@ -4,7 +4,6 @@ import { useFormik } from 'formik' import { forwardRef, RefObject, useImperativeHandle, useRef, useState } from 'react' import { useNavigate } from 'react-router' import { generatePath } from 'react-router-dom' -import styled from 'styled-components' import { object, string } from 'yup' import { Button, Dialog, DialogRef } from '~/components/designSystem' @@ -22,7 +21,6 @@ import { useUpdateGocardlessApiKeyMutation, } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' -import { theme } from '~/styles' import { DeleteGocardlessIntegrationDialogRef } from './DeleteGocardlessIntegrationDialog' @@ -228,45 +226,26 @@ export const AddGocardlessDialog = forwardRef((_, ref) = )} > - - - - - - +
+ + +
) }) -const Content = styled.div` - margin-bottom: ${theme.spacing(8)}; - - > *:not(:last-child) { - margin-bottom: ${theme.spacing(6)}; - } -` - -const InlineInputs = styled.div` - display: flex; - flex-direction: row; - align-items: flex-start; - gap: ${theme.spacing(6)}; - - > * { - flex: 1; - } -` - AddGocardlessDialog.displayName = 'AddGocardlessDialog' diff --git a/src/components/settings/integrations/AddLagoTaxManagementDialog.tsx b/src/components/settings/integrations/AddLagoTaxManagementDialog.tsx index 8e73e98f7..b44effa35 100644 --- a/src/components/settings/integrations/AddLagoTaxManagementDialog.tsx +++ b/src/components/settings/integrations/AddLagoTaxManagementDialog.tsx @@ -2,7 +2,6 @@ import { gql } from '@apollo/client' import { useFormik } from 'formik' import { forwardRef } from 'react' import { generatePath, useNavigate } from 'react-router' -import styled from 'styled-components' import { object, string } from 'yup' import { Alert, Button, Dialog, DialogRef, Typography } from '~/components/designSystem' @@ -19,7 +18,6 @@ import { } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' import { useIntegrations } from '~/hooks/useIntegrations' -import { theme } from '~/styles' gql` mutation updateOrgaForLagoTaxManagement($input: UpdateOrganizationInput!) { @@ -110,7 +108,7 @@ export const AddLagoTaxManagementDialog = forwardRef )} > - +
)} - +
) }, ) -const Content = styled.div` - margin-bottom: ${theme.spacing(8)}; - - > *:not(:last-child) { - margin-bottom: ${theme.spacing(8)}; - } -` - AddLagoTaxManagementDialog.displayName = 'AddLagoTaxManagementDialog' diff --git a/src/components/settings/integrations/AddNetsuiteDialog.tsx b/src/components/settings/integrations/AddNetsuiteDialog.tsx index f6ff27276..292d03ef4 100644 --- a/src/components/settings/integrations/AddNetsuiteDialog.tsx +++ b/src/components/settings/integrations/AddNetsuiteDialog.tsx @@ -6,7 +6,6 @@ import { GraphQLFormattedError } from 'graphql' import { forwardRef, RefObject, useId, useImperativeHandle, useRef, useState } from 'react' import { useNavigate } from 'react-router' import { generatePath } from 'react-router-dom' -import styled from 'styled-components' import { boolean, object, string } from 'yup' import { Alert, Button, Chip, Dialog, DialogRef, Typography } from '~/components/designSystem' @@ -22,7 +21,6 @@ import { } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' import { NetsuiteIntegrationDetailsTabs } from '~/pages/settings/NetsuiteIntegrationDetails' -import { theme } from '~/styles' import { DeleteNetsuiteIntegrationDialogRef } from './DeleteNetsuiteIntegrationDialog' @@ -273,8 +271,9 @@ export const AddNetsuiteDialog = forwardRef((_, ref) => { )} - +
((_, ref) => { formikProps={formikProps} /> - +
((_, ref) => { ) }) -const InlineInputs = styled.div` - display: flex; - flex-direction: row; - align-items: flex-start; - gap: ${theme.spacing(6)}; - - > * { - flex: 1; - } -` - AddNetsuiteDialog.displayName = 'AddNetsuiteDialog' diff --git a/src/components/settings/integrations/AddStripeDialog.tsx b/src/components/settings/integrations/AddStripeDialog.tsx index 01c8af5cd..52beb7550 100644 --- a/src/components/settings/integrations/AddStripeDialog.tsx +++ b/src/components/settings/integrations/AddStripeDialog.tsx @@ -4,7 +4,6 @@ import { useFormik } from 'formik' import { forwardRef, RefObject, useImperativeHandle, useRef, useState } from 'react' import { useNavigate } from 'react-router' import { generatePath } from 'react-router-dom' -import styled from 'styled-components' import { object, string } from 'yup' import { Button, Dialog, DialogRef } from '~/components/designSystem' @@ -22,7 +21,6 @@ import { useUpdateStripeApiKeyMutation, } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' -import { theme } from '~/styles' import { DeleteStripeIntegrationDialogRef } from './DeleteStripeIntegrationDialog' @@ -235,9 +233,10 @@ export const AddStripeDialog = forwardRef((_, ref) => { )} > - - +
+
((_, ref) => { placeholder={translate('text_6584550dc4cec7adf861504f')} /> - +
((_, ref) => { placeholder={translate('text_62b1edddbf5f461ab9712756')} formikProps={formikProps} /> - +
) }) -const Content = styled.div` - margin-bottom: ${theme.spacing(8)}; - - > *:not(:last-child) { - margin-bottom: ${theme.spacing(6)}; - } -` - -const InlineInputs = styled.div` - display: flex; - flex-direction: row; - align-items: flex-start; - gap: ${theme.spacing(6)}; - - > * { - flex: 1; - } -` - AddStripeDialog.displayName = 'AddStripeDialog' diff --git a/src/components/settings/integrations/AddXeroDialog.tsx b/src/components/settings/integrations/AddXeroDialog.tsx index 2eda3cc2c..8f24b763b 100644 --- a/src/components/settings/integrations/AddXeroDialog.tsx +++ b/src/components/settings/integrations/AddXeroDialog.tsx @@ -6,7 +6,6 @@ import { GraphQLFormattedError } from 'graphql' import { forwardRef, RefObject, useId, useImperativeHandle, useRef, useState } from 'react' import { useNavigate } from 'react-router' import { generatePath } from 'react-router-dom' -import styled from 'styled-components' import { boolean, object, string } from 'yup' import { Alert, Button, Chip, Dialog, DialogRef, Typography } from '~/components/designSystem' @@ -22,7 +21,6 @@ import { } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' import { XeroIntegrationDetailsTabs } from '~/pages/settings/XeroIntegrationDetails' -import { theme } from '~/styles' import { DeleteXeroIntegrationDialogRef } from './DeleteXeroIntegrationDialog' @@ -248,8 +246,9 @@ export const AddXeroDialog = forwardRef((_, ref) => { )} - +
((_, ref) => { formikProps={formikProps} /> - +
@@ -399,15 +399,4 @@ export const AddXeroDialog = forwardRef((_, ref) => { ) }) -const InlineInputs = styled.div` - display: flex; - flex-direction: row; - align-items: flex-start; - gap: ${theme.spacing(6)}; - - > * { - flex: 1; - } -` - AddXeroDialog.displayName = 'AddXeroDialog' diff --git a/src/components/settings/integrations/AnrokIntegrationItemsList.tsx b/src/components/settings/integrations/AnrokIntegrationItemsList.tsx index 67d5113a6..fe4afabc3 100644 --- a/src/components/settings/integrations/AnrokIntegrationItemsList.tsx +++ b/src/components/settings/integrations/AnrokIntegrationItemsList.tsx @@ -2,7 +2,6 @@ import { gql } from '@apollo/client' import { Stack } from '@mui/material' import { useEffect, useRef, useState } from 'react' import { useSearchParams } from 'react-router-dom' -import styled from 'styled-components' import { Button, Popper, Typography } from '~/components/designSystem' import { SearchInput } from '~/components/SearchInput' @@ -17,7 +16,7 @@ import { } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' import { useDebouncedSearch } from '~/hooks/useDebouncedSearch' -import { MenuPopper, NAV_HEIGHT, theme } from '~/styles' +import { MenuPopper } from '~/styles' import AnrokIntegrationItemsListAddons from './AnrokIntegrationItemsListAddons' import AnrokIntegrationItemsListBillableMetrics from './AnrokIntegrationItemsListBillableMetrics' @@ -178,7 +177,7 @@ const AnrokIntegrationItemsList = ({ integrationId }: { integrationId: string }) return ( <> - +
{translate('text_6630e3210c13c500cd398e95')} @@ -243,6 +242,7 @@ const AnrokIntegrationItemsList = ({ integrationId }: { integrationId: string }) /> ) : null} +
{selectedItemType === SelectedItemTypeEnum.Default ? ( { const { translate } = useInternationalization() return ( - +
{columnName} {translate('text_6630e3210c13c500cd398e97')} - +
) } export default IntegrationItemHeader - -const ItemHeader = styled.div` - height: ${HEADER_TABLE_HEIGHT}px; - padding: 0 ${theme.spacing(12)}; - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: space-between; - box-shadow: ${theme.shadows[7]}; - background-color: ${theme.palette.grey[100]}; -` diff --git a/src/components/settings/integrations/IntegrationItemLine.tsx b/src/components/settings/integrations/IntegrationItemLine.tsx index ea987927d..7d0f3f4dc 100644 --- a/src/components/settings/integrations/IntegrationItemLine.tsx +++ b/src/components/settings/integrations/IntegrationItemLine.tsx @@ -1,9 +1,8 @@ import { Stack } from '@mui/material' -import styled from 'styled-components' import { Avatar, Icon, IconName, Skeleton, Typography } from '~/components/designSystem' import { useInternationalization } from '~/hooks/core/useInternationalization' -import { NAV_HEIGHT, theme } from '~/styles' +import { theme } from '~/styles' const STATUS_SIZE = 12 @@ -31,21 +30,24 @@ const IntegrationItemLine = ({ if (loading) { return ( - +
- + - +
) } return ( - + ) } export default IntegrationItemLine - -const ItemLine = styled.div` - min-height: ${NAV_HEIGHT}px; - padding: ${theme.spacing(3)} ${theme.spacing(12)}; - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: space-between; - box-shadow: ${theme.shadows[7]}; - cursor: pointer; - - &:hover { - background-color: ${theme.palette.grey[100]}; - } -` - -const SkeletonWrapper = styled.div` - height: ${NAV_HEIGHT}px; - padding: ${theme.spacing(3)} ${theme.spacing(12)}; - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: space-between; - box-shadow: ${theme.shadows[7]}; -` - -const StatusContainer = styled.div` - display: flex; - align-items: center; - background-color: ${theme.palette.grey[100]}; - padding: ${theme.spacing(1)} ${theme.spacing(2)}; - box-sizing: border-box; - border-radius: ${theme.shape.borderRadius}px; - min-height: ${theme.spacing(8)}; - gap: ${theme.spacing(2)}; - outline: 1px solid ${theme.palette.grey[300]}; - outline-offset: -1px; - - svg { - flex-shrink: 0; - } -` diff --git a/src/components/settings/integrations/NetsuiteIntegrationItemsList.tsx b/src/components/settings/integrations/NetsuiteIntegrationItemsList.tsx index 0e64f4763..312000984 100644 --- a/src/components/settings/integrations/NetsuiteIntegrationItemsList.tsx +++ b/src/components/settings/integrations/NetsuiteIntegrationItemsList.tsx @@ -2,7 +2,6 @@ import { gql } from '@apollo/client' import { Stack } from '@mui/material' import { useEffect, useRef, useState } from 'react' import { useSearchParams } from 'react-router-dom' -import styled from 'styled-components' import { Button, Popper, Typography } from '~/components/designSystem' import { SearchInput } from '~/components/SearchInput' @@ -17,7 +16,7 @@ import { } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' import { useDebouncedSearch } from '~/hooks/useDebouncedSearch' -import { MenuPopper, NAV_HEIGHT, theme } from '~/styles' +import { MenuPopper } from '~/styles' import NetsuiteIntegrationItemsListAddons from './NetsuiteIntegrationItemsListAddons' import NetsuiteIntegrationItemsListBillableMetrics from './NetsuiteIntegrationItemsListBillableMetrics' @@ -179,7 +178,7 @@ const NetsuiteIntegrationItemsList = ({ integrationId }: { integrationId: string return ( <> - +
{translate('text_6630e3210c13c500cd398e95')} @@ -244,6 +243,7 @@ const NetsuiteIntegrationItemsList = ({ integrationId }: { integrationId: string /> ) : null} +
{selectedItemType === SelectedItemTypeEnum.Default ? ( - +
{translate('text_6630e3210c13c500cd398e95')} @@ -243,6 +242,7 @@ const XeroIntegrationItemsList = ({ integrationId }: { integrationId: string }) /> ) : null} +
{selectedItemType === SelectedItemTypeEnum.Default ? ( )} > - - +
+
- -
+
) }, ) XeroIntegrationMapItemDialog.displayName = 'XeroIntegrationMapItemDialog' - -const Container = styled.div` - margin-bottom: ${theme.spacing(8)}; - - > *:not(:last-child) { - margin-bottom: ${theme.spacing(6)}; - } -` - -const InlineElements = styled.div` - display: flex; - gap: ${theme.spacing(3)}; - - > *:first-child { - flex: 1; - } - - > *:last-child { - margin-top: ${theme.spacing(7)}; - } -` diff --git a/src/components/settings/invoices/AddOrganizationVatRateDialog.tsx b/src/components/settings/invoices/AddOrganizationVatRateDialog.tsx index 997e4df20..6eb057151 100644 --- a/src/components/settings/invoices/AddOrganizationVatRateDialog.tsx +++ b/src/components/settings/invoices/AddOrganizationVatRateDialog.tsx @@ -1,6 +1,5 @@ import { gql } from '@apollo/client' import { forwardRef, useMemo, useState } from 'react' -import styled from 'styled-components' import { Button, Dialog, DialogRef, Typography } from '~/components/designSystem' import { ComboBox, ComboboxItem } from '~/components/form' @@ -14,7 +13,6 @@ import { } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' import { usePermissions } from '~/hooks/usePermissions' -import { theme } from '~/styles' gql` query getTaxRatesForEditOrga($limit: Int, $page: Int, $searchTerm: String) { @@ -131,7 +129,7 @@ export const AddOrganizationVatRateDialog = forwardRef< )} data-test="add-organization-tax-dialog" > - +
- +
) }) -const Content = styled.div` - margin-bottom: ${theme.spacing(8)}; -` - AddOrganizationVatRateDialog.displayName = 'forwardRef' diff --git a/src/components/settings/invoices/EditDefaultCurrencyDialog.tsx b/src/components/settings/invoices/EditDefaultCurrencyDialog.tsx index db01064b0..c8ed5231b 100644 --- a/src/components/settings/invoices/EditDefaultCurrencyDialog.tsx +++ b/src/components/settings/invoices/EditDefaultCurrencyDialog.tsx @@ -1,7 +1,6 @@ import { gql } from '@apollo/client' import { useFormik } from 'formik' import { forwardRef, useImperativeHandle, useRef, useState } from 'react' -import styled from 'styled-components' import { object, string } from 'yup' import { Button, Dialog, DialogRef } from '~/components/designSystem' @@ -14,7 +13,6 @@ import { useUpdateOrganizationDefaultCurrencyMutation, } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' -import { theme } from '~/styles' gql` fragment EditOrganizationDefaultCurrencyForDialog on CurrentOrganization { @@ -116,7 +114,7 @@ export const EditDefaultCurrencyDialog = forwardRef )} > - +
- +
) }) -const ContentWrapper = styled.div` - display: flex; - gap: ${theme.spacing(3)}; - margin-bottom: ${theme.spacing(8)}; - - > * { - flex: 1; - } - - ${theme.breakpoints.down('md')} { - flex-direction: column; - } -` - EditDefaultCurrencyDialog.displayName = 'forwardRef' diff --git a/src/components/settings/invoices/EditFinalizeZeroAmountInvoiceDialog.tsx b/src/components/settings/invoices/EditFinalizeZeroAmountInvoiceDialog.tsx index c85018fde..ad33635b0 100644 --- a/src/components/settings/invoices/EditFinalizeZeroAmountInvoiceDialog.tsx +++ b/src/components/settings/invoices/EditFinalizeZeroAmountInvoiceDialog.tsx @@ -1,7 +1,6 @@ import { gql } from '@apollo/client' import { useFormik } from 'formik' import { forwardRef } from 'react' -import styled from 'styled-components' import { object, string } from 'yup' import { Button, Dialog, DialogRef } from '~/components/designSystem' @@ -15,7 +14,6 @@ import { useUpdateOrganizationFinalizeZeroAmountInvoiceMutation, } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' -import { theme } from '~/styles' gql` fragment EditCustomerFinalizeZeroAmountInvoiceForDialog on Customer { @@ -170,7 +168,7 @@ export const EditFinalizeZeroAmountInvoiceDialog = forwardRef< )} > - +
- +
) }) -const ContentWrapper = styled.div` - display: flex; - gap: ${theme.spacing(3)}; - margin-bottom: ${theme.spacing(8)}; - - > * { - flex: 1; - } - - ${theme.breakpoints.down('md')} { - flex-direction: column; - } -` - EditFinalizeZeroAmountInvoiceDialog.displayName = 'forwardRef' diff --git a/src/components/settings/invoices/EditNetPaymentTermDialog.tsx b/src/components/settings/invoices/EditNetPaymentTermDialog.tsx index 78cebf1ed..d7c5176d5 100644 --- a/src/components/settings/invoices/EditNetPaymentTermDialog.tsx +++ b/src/components/settings/invoices/EditNetPaymentTermDialog.tsx @@ -2,7 +2,6 @@ import { gql } from '@apollo/client' import { InputAdornment } from '@mui/material' import { useFormik } from 'formik' import { forwardRef, useImperativeHandle, useRef, useState } from 'react' -import styled from 'styled-components' import { number, object, string } from 'yup' import { Button, Dialog, DialogRef } from '~/components/designSystem' @@ -16,7 +15,6 @@ import { useUpdateOrganizationNetPaymentTermMutation, } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' -import { theme } from '~/styles' gql` fragment EditCustomerNetPaymentTermForDialog on Customer { @@ -201,7 +199,7 @@ export const EditNetPaymentTermDialog = forwardRef< )} > - +
)} - +
) }) -const ContentWrapper = styled.div` - display: flex; - gap: ${theme.spacing(3)}; - margin-bottom: ${theme.spacing(8)}; - - > * { - flex: 1; - } - - ${theme.breakpoints.down('md')} { - flex-direction: column; - } -` - EditNetPaymentTermDialog.displayName = 'forwardRef' diff --git a/src/components/settings/invoices/EditOrganizationDocumentLocaleDialog.tsx b/src/components/settings/invoices/EditOrganizationDocumentLocaleDialog.tsx index ce507b3e1..4bf274db0 100644 --- a/src/components/settings/invoices/EditOrganizationDocumentLocaleDialog.tsx +++ b/src/components/settings/invoices/EditOrganizationDocumentLocaleDialog.tsx @@ -1,7 +1,6 @@ import { gql } from '@apollo/client' import { useFormik } from 'formik' import { forwardRef } from 'react' -import styled from 'styled-components' import { object, string } from 'yup' import { Button, Dialog, DialogRef, Typography } from '~/components/designSystem' @@ -14,7 +13,6 @@ import { useUpdateDocumentLocaleOrganizationMutation, } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' -import { theme } from '~/styles' gql` mutation updateDocumentLocaleOrganization($input: UpdateOrganizationInput!) { @@ -110,7 +108,7 @@ export const EditOrganizationDocumentLocaleDialog = forwardRef< )} > - +
- +
) }) -const Content = styled.div` - margin-bottom: ${theme.spacing(8)}; -` - EditOrganizationDocumentLocaleDialog.displayName = 'forwardRef' diff --git a/src/components/settings/invoices/EditOrganizationGracePeriodDialog.tsx b/src/components/settings/invoices/EditOrganizationGracePeriodDialog.tsx index 7342beebc..eb0efdc2f 100644 --- a/src/components/settings/invoices/EditOrganizationGracePeriodDialog.tsx +++ b/src/components/settings/invoices/EditOrganizationGracePeriodDialog.tsx @@ -2,7 +2,6 @@ import { gql } from '@apollo/client' import { InputAdornment } from '@mui/material' import { useFormik } from 'formik' import { forwardRef } from 'react' -import styled from 'styled-components' import { number, object } from 'yup' import { Button, Dialog, DialogRef } from '~/components/designSystem' @@ -13,7 +12,6 @@ import { useUpdateOrganizationGracePeriodMutation, } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' -import { theme } from '~/styles' gql` mutation updateOrganizationGracePeriod($input: UpdateOrganizationInput!) { @@ -96,7 +94,7 @@ export const EditOrganizationGracePeriodDialog = forwardRef< )} > - +
- +
) }) -const Content = styled.div` - margin-bottom: ${theme.spacing(8)}; -` - EditOrganizationGracePeriodDialog.displayName = 'forwardRef' diff --git a/src/components/settings/invoices/EditOrganizationInvoiceNumberingDialog.tsx b/src/components/settings/invoices/EditOrganizationInvoiceNumberingDialog.tsx index 633108c1f..f1b977e7e 100644 --- a/src/components/settings/invoices/EditOrganizationInvoiceNumberingDialog.tsx +++ b/src/components/settings/invoices/EditOrganizationInvoiceNumberingDialog.tsx @@ -1,8 +1,6 @@ -/* eslint-disable tailwindcss/no-custom-classname */ import { gql } from '@apollo/client' import { useFormik } from 'formik' import { forwardRef } from 'react' -import styled from 'styled-components' import { object, string } from 'yup' import { Button, Chip, Dialog, DialogRef, Typography } from '~/components/designSystem' @@ -14,7 +12,6 @@ import { useUpdateOrganizationInvoiceNumberingMutation, } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' -import { theme } from '~/styles' const DynamicPrefixTranslationLoohup = { [DocumentNumberingEnum.PerCustomer]: 'text_6566f920a1d6c35693d6cce0', @@ -110,8 +107,8 @@ export const EditOrganizationInvoiceNumberingDialog = forwardRef< )} > - - +
+
{getInvoiceNumberPreview( @@ -119,7 +116,6 @@ export const EditOrganizationInvoiceNumberingDialog = forwardRef< formikProps.values.documentNumberPrefix || '', )} - {translate('text_6566f920a1d6c35693d6ccae')} @@ -127,6 +123,7 @@ export const EditOrganizationInvoiceNumberingDialog = forwardRef< formikProps={formikProps} value={DocumentNumberingEnum.PerCustomer} label={translate('text_6566f920a1d6c35693d6ccb8')} @@ -139,7 +136,7 @@ export const EditOrganizationInvoiceNumberingDialog = forwardRef< /> - +
- + - - + - - - +
+
) }, ) -const Content = styled.div` - display: flex; - flex-direction: column; - gap: ${theme.spacing(8)}; - margin-bottom: ${theme.spacing(8)}; -` - -const PreviewBlock = styled.div` - display: flex; - align-items: center; - gap: ${theme.spacing(3)}; - padding: ${theme.spacing(3)}; - box-sizing: border-box; - border-radius: 11px; - border: 1px solid ${theme.palette.grey[300]}; -` - -const RadioContainer = styled.div` - display: flex; - flex-direction: column; - gap: ${theme.spacing(1)}; -` - -const RadioWrapper = styled.div` - display: flex; - flex-direction: column; - gap: ${theme.spacing(3)}; -` - -const InlineInputsWrapper = styled.div` - display: grid; - grid-template-columns: 1fr 8px 1fr 8px 80px; - gap: ${theme.spacing(3)}; - - .separator { - height: fit-content; - margin-top: 38px; - } -` - EditOrganizationInvoiceNumberingDialog.displayName = 'forwardRef' diff --git a/src/components/settings/invoices/EditOrganizationInvoiceTemplateDialog.tsx b/src/components/settings/invoices/EditOrganizationInvoiceTemplateDialog.tsx index b0d0854f8..aeecf2779 100644 --- a/src/components/settings/invoices/EditOrganizationInvoiceTemplateDialog.tsx +++ b/src/components/settings/invoices/EditOrganizationInvoiceTemplateDialog.tsx @@ -1,7 +1,6 @@ import { gql } from '@apollo/client' import { useFormik } from 'formik' import { forwardRef } from 'react' -import styled from 'styled-components' import { object, string } from 'yup' import { Button, Dialog, DialogRef } from '~/components/designSystem' @@ -9,7 +8,6 @@ import { TextInputField } from '~/components/form' import { addToast } from '~/core/apolloClient' import { useUpdateOrganizationInvoiceTemplateMutation } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' -import { theme } from '~/styles' const MAX_CHAR_LIMIT = 600 @@ -97,7 +95,7 @@ export const EditOrganizationInvoiceTemplateDialog = forwardRef< )} > - +
-
+
+
{!!formikProps.errors?.billingConfiguration?.invoiceFooter ? translate('text_62bb10ad2a10bd182d00203b') : translate('text_62bc52dd8536260acc9eb762')}
-
+
{formikProps.values.billingConfiguration?.invoiceFooter?.length}/{MAX_CHAR_LIMIT}
- +
} /> - +
) }) -const Content = styled.div` - margin-bottom: ${theme.spacing(8)}; -` - -const TextInputHelper = styled.div` - display: flex; - justify-content: space-between; - - > div:first-child { - flex: 1; - } - - > div:last-child { - flex-shrink: 0; - } -` - EditOrganizationInvoiceTemplateDialog.displayName = 'forwardRef' diff --git a/src/components/settings/members/CreateInviteDialog.tsx b/src/components/settings/members/CreateInviteDialog.tsx index c249466f0..68e9adb3b 100644 --- a/src/components/settings/members/CreateInviteDialog.tsx +++ b/src/components/settings/members/CreateInviteDialog.tsx @@ -3,7 +3,6 @@ import { Stack } from '@mui/material' import { useFormik } from 'formik' import { forwardRef, useState } from 'react' import { generatePath } from 'react-router-dom' -import styled from 'styled-components' import { object, string } from 'yup' import { Button, Dialog, DialogRef, Typography } from '~/components/designSystem' @@ -25,7 +24,6 @@ import { import { useInternationalization } from '~/hooks/core/useInternationalization' import { useOrganizationInfos } from '~/hooks/useOrganizationInfos' import ErrorImage from '~/public/images/maneki/error.svg' -import { theme } from '~/styles' import { RolePickerField } from './RolePickerField' @@ -164,6 +162,7 @@ export const CreateInviteDialog = forwardRef((_, ref) => { > {!inviteToken ? ( +
((_, ref) => { /> ) : ( <> - +
{translate('text_63208c701ce25db781407458')} {formikProps.values.email} - - +
+
{translate('text_664f035a68227f00e261b7ec')} {translate(getRoleTranslationKey[formikProps.values.role])} - - +
+
{translate('text_63208c701ce25db781407475')} {invitationUrl} - +
)} - +
) }) -const Content = styled.div` - > * { - margin-bottom: ${theme.spacing(6)}; - } - - &:last-child { - margin-bottom: ${theme.spacing(8)}; - } -` - -const Line = styled.div` - display: flex; - align-items: baseline; -` - CreateInviteDialog.displayName = 'CreateInviteDialog' diff --git a/src/components/settings/members/EditInviteRoleDialog.tsx b/src/components/settings/members/EditInviteRoleDialog.tsx index 7d404db6d..9f67a98af 100644 --- a/src/components/settings/members/EditInviteRoleDialog.tsx +++ b/src/components/settings/members/EditInviteRoleDialog.tsx @@ -2,7 +2,6 @@ import { gql } from '@apollo/client' import { Stack } from '@mui/material' import { useFormik } from 'formik' import { forwardRef, useImperativeHandle, useRef, useState } from 'react' -import styled from 'styled-components' import { object, string } from 'yup' import { Avatar, Button, Dialog, DialogRef, Typography } from '~/components/designSystem' @@ -14,7 +13,6 @@ import { useUpdateInviteRoleMutation, } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' -import { theme } from '~/styles' import { RolePickerField } from './RolePickerField' @@ -115,42 +113,26 @@ export const EditInviteRoleDialog = forwardRef((_, ref) )} > - - - - - - {localData?.invite?.email} - - - - formikProps.setFieldValue('role', value)} - selectedValue={formikProps.values.role} +
+ + + + {localData?.invite?.email} + - + + formikProps.setFieldValue('role', value)} + selectedValue={formikProps.values.role} + /> +
) }) -const ContentWrapper = styled.div` - display: flex; - gap: ${theme.spacing(3)}; - margin-bottom: ${theme.spacing(8)}; - - > * { - flex: 1; - } - - ${theme.breakpoints.down('md')} { - flex-direction: column; - } -` - EditInviteRoleDialog.displayName = 'forwardRef' diff --git a/src/components/settings/members/EditMemberRoleDialog.tsx b/src/components/settings/members/EditMemberRoleDialog.tsx index 11d85f415..8f98ba6ac 100644 --- a/src/components/settings/members/EditMemberRoleDialog.tsx +++ b/src/components/settings/members/EditMemberRoleDialog.tsx @@ -3,7 +3,6 @@ import { Stack } from '@mui/material' import { useFormik } from 'formik' import { forwardRef, useImperativeHandle, useRef, useState } from 'react' import { useNavigate } from 'react-router-dom' -import styled from 'styled-components' import { object, string } from 'yup' import { Alert, Avatar, Button, Dialog, DialogRef, Typography } from '~/components/designSystem' @@ -17,7 +16,6 @@ import { useUpdateMembershipRoleMutation, } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' -import { theme } from '~/styles' import { RolePickerField } from './RolePickerField' @@ -140,46 +138,30 @@ export const EditMemberRoleDialog = forwardRef((_, ref) )} > - - - - - - {localData?.member?.user?.email} - - - - formikProps.setFieldValue('role', value)} - selectedValue={formikProps.values.role} +
+ + - - {localData?.isEditingLastAdmin && ( - {translate('text_664f035a68227f00e261b7f4')} - )} + + {localData?.member?.user?.email} + - + + formikProps.setFieldValue('role', value)} + selectedValue={formikProps.values.role} + /> + + {localData?.isEditingLastAdmin && ( + {translate('text_664f035a68227f00e261b7f4')} + )} +
) }) -const ContentWrapper = styled.div` - display: flex; - gap: ${theme.spacing(3)}; - margin-bottom: ${theme.spacing(8)}; - - > * { - flex: 1; - } - - ${theme.breakpoints.down('md')} { - flex-direction: column; - } -` - EditMemberRoleDialog.displayName = 'forwardRef' diff --git a/src/components/settings/members/RolePickerField.tsx b/src/components/settings/members/RolePickerField.tsx index fb27d2d7b..7cd86966b 100644 --- a/src/components/settings/members/RolePickerField.tsx +++ b/src/components/settings/members/RolePickerField.tsx @@ -1,7 +1,6 @@ import { gql } from '@apollo/client' import { Stack } from '@mui/material' import { useRef } from 'react' -import styled from 'styled-components' import { Button, Icon, Typography } from '~/components/designSystem' import { Radio } from '~/components/form' @@ -11,7 +10,6 @@ import { getRoleTranslationKey } from '~/core/constants/form' import { MembershipRole } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' import { useCurrentUser } from '~/hooks/useCurrentUser' -import { theme } from '~/styles' gql` fragment InviteForRolePickerField on Invite { @@ -55,7 +53,7 @@ export const RolePickerField = ({ title, onChange, selectedValue }: RolePickerFi /> {!isPremium && ( - +
@@ -74,7 +72,7 @@ export const RolePickerField = ({ title, onChange, selectedValue }: RolePickerFi > {translate('text_65ae73ebe3a66bec2b91d72d')} - +
)} ) } - -const FreemiumBlockWrapper = styled.div` - display: flex; - align-items: center; - gap: ${theme.spacing(4)}; - padding: ${theme.spacing(4)} ${theme.spacing(6)}; - box-sizing: border-box; - border-radius: 12px; - background-color: ${theme.palette.grey[100]}; -` From 89e566c5b2ac20f1c62affc110a560b4cf200a4b Mon Sep 17 00:00:00 2001 From: Kelly Phan Date: Wed, 26 Feb 2025 15:09:43 +0100 Subject: [PATCH 2/4] fix: ternary warning --- .../AnrokIntegrationItemsList.tsx | 18 +++++++++-------- .../NetsuiteIntegrationItemsList.tsx | 19 +++++++++++------- .../integrations/XeroIntegrationItemsList.tsx | 20 +++++++++++-------- .../settings/members/CreateInviteDialog.tsx | 9 +++++---- 4 files changed, 39 insertions(+), 27 deletions(-) diff --git a/src/components/settings/integrations/AnrokIntegrationItemsList.tsx b/src/components/settings/integrations/AnrokIntegrationItemsList.tsx index fe4afabc3..7bb85198b 100644 --- a/src/components/settings/integrations/AnrokIntegrationItemsList.tsx +++ b/src/components/settings/integrations/AnrokIntegrationItemsList.tsx @@ -230,21 +230,21 @@ const AnrokIntegrationItemsList = ({ integrationId }: { integrationId: string }) - {selectedItemType === MappableTypeEnum.AddOn ? ( + {selectedItemType === MappableTypeEnum.AddOn && ( - ) : selectedItemType === MappableTypeEnum.BillableMetric ? ( + )} + {selectedItemType === MappableTypeEnum.BillableMetric && ( - ) : null} - + )}
- {selectedItemType === SelectedItemTypeEnum.Default ? ( + {selectedItemType === SelectedItemTypeEnum.Default && ( - ) : selectedItemType === MappableTypeEnum.AddOn ? ( + )} + {selectedItemType === MappableTypeEnum.AddOn && ( - ) : selectedItemType === MappableTypeEnum.BillableMetric ? ( + )} + {selectedItemType === MappableTypeEnum.BillableMetric && ( - ) : null} + )} diff --git a/src/components/settings/integrations/NetsuiteIntegrationItemsList.tsx b/src/components/settings/integrations/NetsuiteIntegrationItemsList.tsx index 312000984..b1f844f98 100644 --- a/src/components/settings/integrations/NetsuiteIntegrationItemsList.tsx +++ b/src/components/settings/integrations/NetsuiteIntegrationItemsList.tsx @@ -231,18 +231,18 @@ const NetsuiteIntegrationItemsList = ({ integrationId }: { integrationId: string - {selectedItemType === MappableTypeEnum.AddOn ? ( + {selectedItemType === MappableTypeEnum.AddOn && ( - ) : selectedItemType === MappableTypeEnum.BillableMetric ? ( + )} + {selectedItemType === MappableTypeEnum.BillableMetric && ( - ) : null} - + )}
{selectedItemType === SelectedItemTypeEnum.Default ? ( @@ -253,7 +253,9 @@ const NetsuiteIntegrationItemsList = ({ integrationId }: { integrationId: string hasError={!!collectionMappingError} netsuiteIntegrationMapItemDialogRef={netsuiteIntegrationMapItemDialogRef} /> - ) : selectedItemType === MappableTypeEnum.AddOn ? ( + ) : ( + <> + {selectedItemType === MappableTypeEnum.AddOn && ( - ) : selectedItemType === MappableTypeEnum.BillableMetric ? ( + )} + {selectedItemType === MappableTypeEnum.BillableMetric && ( - ) : null} + )} + + )} diff --git a/src/components/settings/integrations/XeroIntegrationItemsList.tsx b/src/components/settings/integrations/XeroIntegrationItemsList.tsx index fdc167276..66f09c2b5 100644 --- a/src/components/settings/integrations/XeroIntegrationItemsList.tsx +++ b/src/components/settings/integrations/XeroIntegrationItemsList.tsx @@ -230,18 +230,18 @@ const XeroIntegrationItemsList = ({ integrationId }: { integrationId: string }) - {selectedItemType === MappableTypeEnum.AddOn ? ( + {selectedItemType === MappableTypeEnum.AddOn && ( - ) : selectedItemType === MappableTypeEnum.BillableMetric ? ( + )} + {selectedItemType === MappableTypeEnum.BillableMetric && ( - ) : null} - + )}
{selectedItemType === SelectedItemTypeEnum.Default ? ( @@ -252,7 +252,9 @@ const XeroIntegrationItemsList = ({ integrationId }: { integrationId: string }) hasError={!!collectionMappingError} xeroIntegrationMapItemDialogRef={xeroIntegrationMapItemDialogRef} /> - ) : selectedItemType === MappableTypeEnum.AddOn ? ( + ) : ( + <> + {selectedItemType === MappableTypeEnum.AddOn && ( - ) : selectedItemType === MappableTypeEnum.BillableMetric ? ( + )} + {selectedItemType === MappableTypeEnum.BillableMetric && ( - ) : null} - + )} + + )} ) diff --git a/src/components/settings/members/CreateInviteDialog.tsx b/src/components/settings/members/CreateInviteDialog.tsx index 68e9adb3b..99e360e26 100644 --- a/src/components/settings/members/CreateInviteDialog.tsx +++ b/src/components/settings/members/CreateInviteDialog.tsx @@ -160,9 +160,8 @@ export const CreateInviteDialog = forwardRef((_, ref) => { )} > - - {!inviteToken ? (
+ {!inviteToken && ( ((_, ref) => { selectedValue={formikProps.values.role} /> - ) : !!error ? ( + )} + {inviteToken && !!error && ( } /> - ) : ( + )} + {inviteToken && !error && ( <>
From d8e343b33c3ceec1a36f5445bb175881673bd7e9 Mon Sep 17 00:00:00 2001 From: Kelly Phan Date: Wed, 26 Feb 2025 15:10:10 +0100 Subject: [PATCH 3/4] fix: typo --- .../AnrokIntegrationItemsList.tsx | 12 +++-- .../NetsuiteIntegrationItemsList.tsx | 46 ++++++++++--------- .../integrations/XeroIntegrationItemsList.tsx | 46 ++++++++++--------- ...EditOrganizationInvoiceNumberingDialog.tsx | 4 +- 4 files changed, 57 insertions(+), 51 deletions(-) diff --git a/src/components/settings/integrations/AnrokIntegrationItemsList.tsx b/src/components/settings/integrations/AnrokIntegrationItemsList.tsx index 7bb85198b..ddd32a9fe 100644 --- a/src/components/settings/integrations/AnrokIntegrationItemsList.tsx +++ b/src/components/settings/integrations/AnrokIntegrationItemsList.tsx @@ -158,10 +158,12 @@ const AnrokIntegrationItemsList = ({ integrationId }: { integrationId: string }) }, }) - const { debouncedSearch: debouncedSearchAddons, isLoading: isLoaddingAddons } = - useDebouncedSearch(getAddonList, addonLoading) + const { debouncedSearch: debouncedSearchAddons, isLoading: isLoadingAddons } = useDebouncedSearch( + getAddonList, + addonLoading, + ) - const { debouncedSearch: debouncedSearchBillableMetrics, isLoading: isLoaddingBillableMetrics } = + const { debouncedSearch: debouncedSearchBillableMetrics, isLoading: isLoadingBillableMetrics } = useDebouncedSearch(getBillableMetricsList, billableMetricsLoading) // handeling data fetching @@ -258,7 +260,7 @@ const AnrokIntegrationItemsList = ({ integrationId }: { integrationId: string }) data={addonData} fetchMoreAddons={fetchMoreAddons} integrationId={integrationId} - isLoading={isLoaddingAddons} + isLoading={isLoadingAddons} hasError={!!addonError} anrokIntegrationMapItemDialogRef={anrokIntegrationMapItemDialogRef} searchTerm={addonVariables?.searchTerm} @@ -269,7 +271,7 @@ const AnrokIntegrationItemsList = ({ integrationId }: { integrationId: string }) data={billableMetricsData} fetchMoreBillableMetrics={fetchMoreBillableMetrics} integrationId={integrationId} - isLoading={isLoaddingBillableMetrics} + isLoading={isLoadingBillableMetrics} hasError={!!billableMetricsError} anrokIntegrationMapItemDialogRef={anrokIntegrationMapItemDialogRef} searchTerm={billableMetricsVariables?.searchTerm} diff --git a/src/components/settings/integrations/NetsuiteIntegrationItemsList.tsx b/src/components/settings/integrations/NetsuiteIntegrationItemsList.tsx index b1f844f98..e62de5b3c 100644 --- a/src/components/settings/integrations/NetsuiteIntegrationItemsList.tsx +++ b/src/components/settings/integrations/NetsuiteIntegrationItemsList.tsx @@ -159,13 +159,15 @@ const NetsuiteIntegrationItemsList = ({ integrationId }: { integrationId: string }, }) - const { debouncedSearch: debouncedSearchAddons, isLoading: isLoaddingAddons } = - useDebouncedSearch(getAddonList, addonLoading) + const { debouncedSearch: debouncedSearchAddons, isLoading: isLoadingAddons } = useDebouncedSearch( + getAddonList, + addonLoading, + ) - const { debouncedSearch: debouncedSearchBillableMetrics, isLoading: isLoaddingBillableMetrics } = + const { debouncedSearch: debouncedSearchBillableMetrics, isLoading: isLoadingBillableMetrics } = useDebouncedSearch(getBillableMetricsList, billableMetricsLoading) - // handeling data fetching + // handling data fetching useEffect(() => { if (selectedItemType === SelectedItemTypeEnum.Default) { getDefaultItems() @@ -256,26 +258,26 @@ const NetsuiteIntegrationItemsList = ({ integrationId }: { integrationId: string ) : ( <> {selectedItemType === MappableTypeEnum.AddOn && ( - + )} {selectedItemType === MappableTypeEnum.BillableMetric && ( - + )} )} diff --git a/src/components/settings/integrations/XeroIntegrationItemsList.tsx b/src/components/settings/integrations/XeroIntegrationItemsList.tsx index 66f09c2b5..cfd918f7b 100644 --- a/src/components/settings/integrations/XeroIntegrationItemsList.tsx +++ b/src/components/settings/integrations/XeroIntegrationItemsList.tsx @@ -158,13 +158,15 @@ const XeroIntegrationItemsList = ({ integrationId }: { integrationId: string }) }, }) - const { debouncedSearch: debouncedSearchAddons, isLoading: isLoaddingAddons } = - useDebouncedSearch(getAddonList, addonLoading) + const { debouncedSearch: debouncedSearchAddons, isLoading: isLoadingAddons } = useDebouncedSearch( + getAddonList, + addonLoading, + ) - const { debouncedSearch: debouncedSearchBillableMetrics, isLoading: isLoaddingBillableMetrics } = + const { debouncedSearch: debouncedSearchBillableMetrics, isLoading: isLoadingBillableMetrics } = useDebouncedSearch(getBillableMetricsList, billableMetricsLoading) - // handeling data fetching + // handling data fetching useEffect(() => { if (selectedItemType === SelectedItemTypeEnum.Default) { getDefaultItems() @@ -255,26 +257,26 @@ const XeroIntegrationItemsList = ({ integrationId }: { integrationId: string }) ) : ( <> {selectedItemType === MappableTypeEnum.AddOn && ( - + )} {selectedItemType === MappableTypeEnum.BillableMetric && ( - + )} )} diff --git a/src/components/settings/invoices/EditOrganizationInvoiceNumberingDialog.tsx b/src/components/settings/invoices/EditOrganizationInvoiceNumberingDialog.tsx index f1b977e7e..995fb8c6a 100644 --- a/src/components/settings/invoices/EditOrganizationInvoiceNumberingDialog.tsx +++ b/src/components/settings/invoices/EditOrganizationInvoiceNumberingDialog.tsx @@ -13,7 +13,7 @@ import { } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' -const DynamicPrefixTranslationLoohup = { +const DynamicPrefixTranslationLookup = { [DocumentNumberingEnum.PerCustomer]: 'text_6566f920a1d6c35693d6cce0', [DocumentNumberingEnum.PerOrganization]: 'YYYYMM', } @@ -154,7 +154,7 @@ export const EditOrganizationInvoiceNumberingDialog = forwardRef< disabled label={translate('text_6566f920a1d6c35693d6ccd8')} value={translate( - DynamicPrefixTranslationLoohup[ + DynamicPrefixTranslationLookup[ formikProps.values.documentNumbering as DocumentNumberingEnum ], )} From 140eb45f5d9b444f6154c61bf277f14fd9f74fce Mon Sep 17 00:00:00 2001 From: Kelly Phan Date: Wed, 26 Feb 2025 15:10:21 +0100 Subject: [PATCH 4/4] fix: use radio group instead --- ...EditOrganizationInvoiceNumberingDialog.tsx | 40 +++++++++---------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/src/components/settings/invoices/EditOrganizationInvoiceNumberingDialog.tsx b/src/components/settings/invoices/EditOrganizationInvoiceNumberingDialog.tsx index 995fb8c6a..239f409cb 100644 --- a/src/components/settings/invoices/EditOrganizationInvoiceNumberingDialog.tsx +++ b/src/components/settings/invoices/EditOrganizationInvoiceNumberingDialog.tsx @@ -4,7 +4,7 @@ import { forwardRef } from 'react' import { object, string } from 'yup' import { Button, Chip, Dialog, DialogRef, Typography } from '~/components/designSystem' -import { RadioField, TextInput, TextInputField } from '~/components/form' +import { RadioGroupField, TextInput, TextInputField } from '~/components/form' import { addToast } from '~/core/apolloClient' import { getInvoiceNumberPreview } from '~/core/utils/invoiceNumberPreview' import { @@ -60,7 +60,7 @@ export const EditOrganizationInvoiceNumberingDialog = forwardRef< }, }) - // Type is manually written here as errors type are not correclty read from UpdateOrganizationInput + // Type is manually written here as errors type are not correctly read from UpdateOrganizationInput const formikProps = useFormik({ initialValues: { documentNumbering, @@ -116,26 +116,24 @@ export const EditOrganizationInvoiceNumberingDialog = forwardRef< formikProps.values.documentNumberPrefix || '', )} - - - {translate('text_6566f920a1d6c35693d6ccae')} - - - - formikProps={formikProps} - value={DocumentNumberingEnum.PerCustomer} - label={translate('text_6566f920a1d6c35693d6ccb8')} - /> - - - + + +