Skip to content

Commit

Permalink
WIP customer mapping
Browse files Browse the repository at this point in the history
  • Loading branch information
@ansmonjol
ansmonjol committed May 13, 2024
1 parent 3777d84 commit 46eef06
Show file tree
Hide file tree
Showing 7 changed files with 76 additions and 555 deletions.
374 changes: 20 additions & 354 deletions src/components/customers/addDrawer/AddCustomerDrawer.tsx
View file

Large diffs are not rendered by default.

102 changes: 25 additions & 77 deletions src/components/customers/addDrawer/ExternalAppsAccordion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import {
Checkbox,
ComboBox,
ComboboxDataGrouped,
ComboBoxField,
TextInputField,
} from '~/components/form'
import { Item } from '~/components/form/ComboBox/ComboBoxItem'
Expand All @@ -36,8 +35,6 @@ import {
UpdateCustomerInput,
useIntegrationsListForCustomerEditExternalAppsAccordionLazyQuery,
usePaymentProvidersListForCustomerCreateEditExternalAppsAccordionLazyQuery,
useSubsidiariesListForCustomerCreateEditExternalAppsAccordionLazyQuery,
useSubsidiariesListForCustomerCreateEditExternalAppsAccordionQuery,
} from '~/generated/graphql'
import { useInternationalization } from '~/hooks/core/useInternationalization'
import Adyen from '~/public/images/adyen.svg'
Expand Down Expand Up @@ -102,15 +99,6 @@ gql`
}
}
}
query subsidiariesListForCustomerCreateEditExternalAppsAccordion($integrationId: ID) {
integrationSubsidiaries(integrationId: $integrationId) {
collection {
externalId
externalName
}
}
}
`

type TExternalAppsAccordionProps = {
Expand All @@ -121,6 +109,7 @@ type TExternalAppsAccordionProps = {
export const ExternalAppsAccordion = ({ formikProps, isEdition }: TExternalAppsAccordionProps) => {
const { translate } = useInternationalization()

const [isSyncWithProviderDisabled, setIsSyncWithProviderDisabled] = useState(false)
const [showPaymentProviderSection, setShowPaymentProviderSection] = useState<boolean>(
!!formikProps.values.paymentProvider,
)
Expand All @@ -147,19 +136,11 @@ export const ExternalAppsAccordion = ({ formikProps, isEdition }: TExternalAppsA
(i) => i.code === formikProps.values.integrationCustomer?.integrationCode,
)

const { data: subsidiariesData } =
useSubsidiariesListForCustomerCreateEditExternalAppsAccordionQuery({
variables: { integrationId: selectedNetsuiteIntegration?.id },
skip: !selectedNetsuiteIntegration?.id,
})

const isEditingAlreadyCreatedNetsuiteConnection =
const isEditingIlreadyCreatedNetsuiteConnection =
isEdition &&
formikProps.initialValues.integrationCustomer?.integrationCode ===
selectedNetsuiteIntegration?.code

const isSyncWithProviderDisabled = !!formikProps.values.providerCustomer?.syncWithProvider

const connectedProvidersData: ComboboxDataGrouped[] | [] = useMemo(() => {
if (!providersData?.paymentProviders?.collection.length) return []

Expand Down Expand Up @@ -201,26 +182,6 @@ export const ExternalAppsAccordion = ({ formikProps, isEdition }: TExternalAppsA
}))
}, [integrationsData?.integrations?.collection])

const connectedIntegrationSubscidiaries: BasicComboBoxData[] | [] = useMemo(() => {
if (!subsidiariesData?.integrationSubsidiaries?.collection.length) return []

return subsidiariesData?.integrationSubsidiaries?.collection.map((integrationSubsidiary) => ({
value: integrationSubsidiary.externalId,
label: `${integrationSubsidiary.externalName} (${integrationSubsidiary.externalId})`,
labelNode: (
<Item>
<Typography variant="body" color="grey700" noWrap>
{integrationSubsidiary.externalName}
</Typography>
&nbsp;
<Typography variant="body" color="grey600" noWrap>
({integrationSubsidiary.externalId})
</Typography>
</Item>
),
}))
}, [subsidiariesData?.integrationSubsidiaries?.collection])

useEffect(() => {
setShowPaymentProviderSection(!!formikProps.values.paymentProvider)
}, [formikProps.values.paymentProvider])
Expand All @@ -229,6 +190,21 @@ export const ExternalAppsAccordion = ({ formikProps, isEdition }: TExternalAppsA
setShowAccountingProviderSection(!!formikProps.values.integrationCustomer)
}, [formikProps.values.integrationCustomer])

useEffect(() => {
if (!formikProps.values.paymentProvider) {
// If no payment provider, reset stripe customer
formikProps.setFieldValue('providerCustomer.providerCustomerId', undefined)
formikProps.setFieldValue('providerCustomer.syncWithProvider', false)
formikProps.setFieldValue(
'providerCustomer.providerPaymentMethods',
formikProps.values.currency !== CurrencyEnum.Eur
? [ProviderPaymentMethodsEnum.Card]
: [ProviderPaymentMethodsEnum.Card, ProviderPaymentMethodsEnum.SepaDebit],
)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [formikProps.values.paymentProvider])

return (
<Accordion
size="large"
Expand Down Expand Up @@ -299,14 +275,6 @@ export const ExternalAppsAccordion = ({ formikProps, isEdition }: TExternalAppsA
icon="trash"
onClick={() => {
formikProps.setFieldValue('paymentProvider', null)
formikProps.setFieldValue('providerCustomer.providerCustomerId', null)
formikProps.setFieldValue('providerCustomer.syncWithProvider', false)
formikProps.setFieldValue(
'providerCustomer.providerPaymentMethods',
formikProps.values.currency !== CurrencyEnum.Eur
? [ProviderPaymentMethodsEnum.Card]
: [ProviderPaymentMethodsEnum.Card, ProviderPaymentMethodsEnum.SepaDebit],
)
}}
/>
</Stack>
Expand Down Expand Up @@ -368,6 +336,7 @@ export const ExternalAppsAccordion = ({ formikProps, isEdition }: TExternalAppsA
: ''
}`}
onChange={(e, checked) => {
setIsSyncWithProviderDisabled(checked)
formikProps.setFieldValue('providerCustomer.syncWithProvider', checked)
if (!isEdition && checked) {
formikProps.setFieldValue(
Expand Down Expand Up @@ -619,7 +588,7 @@ export const ExternalAppsAccordion = ({ formikProps, isEdition }: TExternalAppsA
<TextInputField
name="integrationCustomer?.externalCustomerId"
disabled={
isEditingAlreadyCreatedNetsuiteConnection ||
isEditingIlreadyCreatedNetsuiteConnection ||
!!formikProps.values.integrationCustomer?.syncWithProvider
}
label={translate('TODO: NetSuite customer ID')}
Expand All @@ -631,7 +600,7 @@ export const ExternalAppsAccordion = ({ formikProps, isEdition }: TExternalAppsA
name="integrationCustomer.syncWithProvider"
value={!!formikProps.values.integrationCustomer?.syncWithProvider}
disabled={
isEditingAlreadyCreatedNetsuiteConnection ||
isEditingIlreadyCreatedNetsuiteConnection ||
!!formikProps.values.integrationCustomer?.externalCustomerId
}
label={translate(
Expand All @@ -640,38 +609,17 @@ export const ExternalAppsAccordion = ({ formikProps, isEdition }: TExternalAppsA
connectionName: selectedNetsuiteIntegration?.name,
},
)}
onChange={(_, checked) => {
onChange={(e, checked) => {
formikProps.setFieldValue('integrationCustomer.syncWithProvider', checked)

if (!isEdition && checked) {
formikProps.setFieldValue('integrationCustomer.externalCustomerId', null)
formikProps.setFieldValue('integrationCustomer.subsidiaryId', null)
formikProps.setFieldValue(
'integrationCustomer.externalCustomerId',
undefined,
)
}
}}
/>

{!!formikProps.values.integrationCustomer?.syncWithProvider && (
<>
<ComboBoxField
name="integrationCustomer.subsidiaryId"
data={connectedIntegrationSubscidiaries}
label={translate('TODO: Subsidiary')}
placeholder={translate(
'TODO: Select and search a subsidiary name or external ID',
)}
PopperProps={{ displayInDialog: true }}
formikProps={formikProps}
/>

{isEdition && (
<Alert type="info">
{translate(
'TODO: This customer will be created to NetSuite after editing in Lago',
)}
</Alert>
)}
</>
)}
</>
)}
</Stack>
Expand Down
8 changes: 3 additions & 5 deletions src/components/settings/integrations/NetsuiteMapItemDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -418,7 +418,7 @@ export const NetsuiteMapItemDialog = forwardRef<NetsuiteMapItemDialogRef>((_, re
const { externalId, externalName, externalAccountCode, itemType } = item

return {
label: `${externalId} - ${externalName}`,
label: `${externalId} - ${externalName} (${externalAccountCode})`,
labelNode: (
<Item>
<Typography variant="body" color="grey700" noWrap>
Expand All @@ -428,9 +428,7 @@ export const NetsuiteMapItemDialog = forwardRef<NetsuiteMapItemDialogRef>((_, re
<>
&nbsp;
<Typography variant="body" color="grey600" noWrap>
{translate('text_6630e52a04d25adb0300f034', {
accountCode: externalAccountCode,
})}
({externalAccountCode})
</Typography>
</>
)}
Expand All @@ -443,7 +441,7 @@ export const NetsuiteMapItemDialog = forwardRef<NetsuiteMapItemDialogRef>((_, re
}),
}
})
}, [initialItemFetchData?.integrationItems?.collection, translate])
}, [initialItemFetchData?.integrationItems?.collection])

const [title, description] = useMemo(() => {
switch (localData?.type) {
Expand Down
2 changes: 2 additions & 0 deletions src/core/constants/form.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ export const SEARCH_TAX_INPUT_FOR_INVOICE_ADD_ON_CLASSNAME = 'searchTaxForInvoic
export const ADD_ITEM_FOR_INVOICE_INPUT_NAME = 'addItemInput'
// Customer
export const SEARCH_TAX_INPUT_FOR_CUSTOMER_CLASSNAME = 'searchTaxForCustomerInput'
export const ADD_CUSTOMER_PAYMENT_PROVIDER_ACCORDION = 'addCustomerPaymentProviderAccordion'
export const ADD_CUSTOMER_ACCOUNTING_PROVIDER_ACCORDION = 'addCustomerAccountingProviderAccordion'

/**** DATA ****/
// Plan form types
Expand Down
50 changes: 0 additions & 50 deletions src/generated/graphql.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5125,13 +5125,6 @@ export type IntegrationsListForCustomerEditExternalAppsAccordionQueryVariables =

export type IntegrationsListForCustomerEditExternalAppsAccordionQuery = { __typename?: 'Query', integrations?: { __typename?: 'IntegrationCollection', collection: Array<{ __typename?: 'NetsuiteIntegration', id: string, code: string, name: string }> } | null };

export type SubsidiariesListForCustomerCreateEditExternalAppsAccordionQueryVariables = Exact<{
integrationId?: InputMaybe<Scalars['ID']['input']>;
}>;


export type SubsidiariesListForCustomerCreateEditExternalAppsAccordionQuery = { __typename?: 'Query', integrationSubsidiaries?: { __typename?: 'SubsidiaryCollection', collection: Array<{ __typename?: 'Subsidiary', externalId: string, externalName?: string | null }> } | null };

export type CreditNotesForListFragment = { __typename?: 'CreditNoteCollection', metadata: { __typename?: 'CollectionMetadata', currentPage: number, totalPages: number }, collection: Array<{ __typename?: 'CreditNote', id: string, canBeVoided: boolean, createdAt: any, creditStatus?: CreditNoteCreditStatusEnum | null, currency: CurrencyEnum, number: string, totalAmountCents: any }> };

export type DownloadCreditNoteMutationVariables = Exact<{
Expand Down Expand Up @@ -10113,49 +10106,6 @@ export type IntegrationsListForCustomerEditExternalAppsAccordionQueryHookResult
export type IntegrationsListForCustomerEditExternalAppsAccordionLazyQueryHookResult = ReturnType<typeof useIntegrationsListForCustomerEditExternalAppsAccordionLazyQuery>;
export type IntegrationsListForCustomerEditExternalAppsAccordionSuspenseQueryHookResult = ReturnType<typeof useIntegrationsListForCustomerEditExternalAppsAccordionSuspenseQuery>;
export type IntegrationsListForCustomerEditExternalAppsAccordionQueryResult = Apollo.QueryResult<IntegrationsListForCustomerEditExternalAppsAccordionQuery, IntegrationsListForCustomerEditExternalAppsAccordionQueryVariables>;
export const SubsidiariesListForCustomerCreateEditExternalAppsAccordionDocument = gql`
query subsidiariesListForCustomerCreateEditExternalAppsAccordion($integrationId: ID) {
integrationSubsidiaries(integrationId: $integrationId) {
collection {
externalId
externalName
}
}
}
`;

/**
* __useSubsidiariesListForCustomerCreateEditExternalAppsAccordionQuery__
*
* To run a query within a React component, call `useSubsidiariesListForCustomerCreateEditExternalAppsAccordionQuery` and pass it any options that fit your needs.
* When your component renders, `useSubsidiariesListForCustomerCreateEditExternalAppsAccordionQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useSubsidiariesListForCustomerCreateEditExternalAppsAccordionQuery({
* variables: {
* integrationId: // value for 'integrationId'
* },
* });
*/
export function useSubsidiariesListForCustomerCreateEditExternalAppsAccordionQuery(baseOptions?: Apollo.QueryHookOptions<SubsidiariesListForCustomerCreateEditExternalAppsAccordionQuery, SubsidiariesListForCustomerCreateEditExternalAppsAccordionQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<SubsidiariesListForCustomerCreateEditExternalAppsAccordionQuery, SubsidiariesListForCustomerCreateEditExternalAppsAccordionQueryVariables>(SubsidiariesListForCustomerCreateEditExternalAppsAccordionDocument, options);
}
export function useSubsidiariesListForCustomerCreateEditExternalAppsAccordionLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<SubsidiariesListForCustomerCreateEditExternalAppsAccordionQuery, SubsidiariesListForCustomerCreateEditExternalAppsAccordionQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<SubsidiariesListForCustomerCreateEditExternalAppsAccordionQuery, SubsidiariesListForCustomerCreateEditExternalAppsAccordionQueryVariables>(SubsidiariesListForCustomerCreateEditExternalAppsAccordionDocument, options);
}
export function useSubsidiariesListForCustomerCreateEditExternalAppsAccordionSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<SubsidiariesListForCustomerCreateEditExternalAppsAccordionQuery, SubsidiariesListForCustomerCreateEditExternalAppsAccordionQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useSuspenseQuery<SubsidiariesListForCustomerCreateEditExternalAppsAccordionQuery, SubsidiariesListForCustomerCreateEditExternalAppsAccordionQueryVariables>(SubsidiariesListForCustomerCreateEditExternalAppsAccordionDocument, options);
}
export type SubsidiariesListForCustomerCreateEditExternalAppsAccordionQueryHookResult = ReturnType<typeof useSubsidiariesListForCustomerCreateEditExternalAppsAccordionQuery>;
export type SubsidiariesListForCustomerCreateEditExternalAppsAccordionLazyQueryHookResult = ReturnType<typeof useSubsidiariesListForCustomerCreateEditExternalAppsAccordionLazyQuery>;
export type SubsidiariesListForCustomerCreateEditExternalAppsAccordionSuspenseQueryHookResult = ReturnType<typeof useSubsidiariesListForCustomerCreateEditExternalAppsAccordionSuspenseQuery>;
export type SubsidiariesListForCustomerCreateEditExternalAppsAccordionQueryResult = Apollo.QueryResult<SubsidiariesListForCustomerCreateEditExternalAppsAccordionQuery, SubsidiariesListForCustomerCreateEditExternalAppsAccordionQueryVariables>;
export const DownloadCreditNoteDocument = gql`
mutation downloadCreditNote($input: DownloadCreditNoteInput!) {
downloadCreditNote(input: $input) {
Expand Down
Loading

0 comments on commit 46eef06

Please sign in to comment.