From df0548f54e5c3e2ef75c1bf56500b42909024537 Mon Sep 17 00:00:00 2001 From: Kelly Phan Date: Thu, 2 Jan 2025 15:37:34 +0100 Subject: [PATCH] refactor: external apps improvement (#1961) * refactor: move file inside its own folder * refactor: use a single layout component * refactor: group into PaymentProvidersAccordion * refactor: group into AccountingProvidersAccordion * refactor: group into TaxProvidersAccordion * refactor: group into CRMProvidersAccordion * refactor: rename variables and functions to stay consistent * refactor: create scrollToIntegration util function * refactor: migrate to tailwind * fix: do not lazy query anymore * fix: migrate fragment in correct file * fix: code review --- .../addDrawer/ExternalAppsAccordion.tsx | 1597 ----------------- .../AccountingProvidersAccordion.tsx | 340 ++++ .../CRMProvidersAccordion.tsx | 381 ++++ .../ExternalAppsAccordionLayout.tsx | 64 + .../PaymentProvidersAccordion.tsx | 386 ++++ .../TaxProvidersAccordion.tsx | 190 ++ .../addDrawer/ExternalAppsAccordion/index.tsx | 212 +++ .../addDrawer/ExternalAppsAccordion/utils.ts | 88 + src/generated/graphql.tsx | 339 ++-- src/hooks/useCreateEditCustomer.ts | 96 +- 10 files changed, 1937 insertions(+), 1756 deletions(-) delete mode 100644 src/components/customers/addDrawer/ExternalAppsAccordion.tsx create mode 100644 src/components/customers/addDrawer/ExternalAppsAccordion/AccountingProvidersAccordion.tsx create mode 100644 src/components/customers/addDrawer/ExternalAppsAccordion/CRMProvidersAccordion.tsx create mode 100644 src/components/customers/addDrawer/ExternalAppsAccordion/ExternalAppsAccordionLayout.tsx create mode 100644 src/components/customers/addDrawer/ExternalAppsAccordion/PaymentProvidersAccordion.tsx create mode 100644 src/components/customers/addDrawer/ExternalAppsAccordion/TaxProvidersAccordion.tsx create mode 100644 src/components/customers/addDrawer/ExternalAppsAccordion/index.tsx create mode 100644 src/components/customers/addDrawer/ExternalAppsAccordion/utils.ts diff --git a/src/components/customers/addDrawer/ExternalAppsAccordion.tsx b/src/components/customers/addDrawer/ExternalAppsAccordion.tsx deleted file mode 100644 index 0e092163c..000000000 --- a/src/components/customers/addDrawer/ExternalAppsAccordion.tsx +++ /dev/null @@ -1,1597 +0,0 @@ -import { gql } from '@apollo/client' -import { Stack } from '@mui/material' -import { FormikProps } from 'formik' -import { useEffect, useMemo, useState } from 'react' -import styled from 'styled-components' - -import { - Accordion, - Alert, - Avatar, - Button, - Icon, - Popper, - Typography, -} from '~/components/designSystem' -import { - BasicComboBoxData, - Checkbox, - ComboBox, - ComboboxDataGrouped, - ComboBoxField, - ComboboxItem, - TextInputField, -} from '~/components/form' -import { - ADD_CUSTOMER_ACCOUNTING_PROVIDER_ACCORDION, - ADD_CUSTOMER_CRM_PROVIDER_ACCORDION, - ADD_CUSTOMER_PAYMENT_PROVIDER_ACCORDION, - ADD_CUSTOMER_TAX_PROVIDER_ACCORDION, - getHubspotTargetedObjectTranslationKey, - MUI_BUTTON_BASE_ROOT_CLASSNAME, -} from '~/core/constants/form' -import { INTEGRATIONS_ROUTE } from '~/core/router' -import { - AnrokIntegration, - CreateCustomerInput, - CurrencyEnum, - CustomerTypeEnum, - HubspotIntegration, - HubspotTargetedObjectsEnum, - IntegrationTypeEnum, - NetsuiteIntegration, - ProviderPaymentMethodsEnum, - ProviderTypeEnum, - SalesforceIntegration, - UpdateCustomerInput, - useAccountingIntegrationsListForCustomerEditExternalAppsAccordionLazyQuery, - usePaymentProvidersListForCustomerCreateEditExternalAppsAccordionLazyQuery, - useSubsidiariesListForCustomerCreateEditExternalAppsAccordionQuery, - XeroIntegration, -} from '~/generated/graphql' -import { useInternationalization } from '~/hooks/core/useInternationalization' -import Adyen from '~/public/images/adyen.svg' -import Anrok from '~/public/images/anrok.svg' -import GoCardless from '~/public/images/gocardless.svg' -import Hubspot from '~/public/images/hubspot.svg' -import Netsuite from '~/public/images/netsuite.svg' -import PSPIcons from '~/public/images/psp-icons.svg' -import Salesforce from '~/public/images/salesforce.svg' -import Stripe from '~/public/images/stripe.svg' -import Xero from '~/public/images/xero.svg' -import { MenuPopper, theme } from '~/styles' - -const hubspotExternalIdTypeCopyMap: Record< - HubspotTargetedObjectsEnum, - Record<'label' | 'placeholder', string> -> = { - [HubspotTargetedObjectsEnum.Companies]: { - label: 'text_1729602057769exfgebgaj4g', - placeholder: 'text_1729602057769w37ljj318sn', - }, - [HubspotTargetedObjectsEnum.Contacts]: { - label: 'text_1729067791880uwec7af9cpq', - placeholder: 'text_1729067791880y0th6mtz2av', - }, -} - -gql` - fragment CustomerForExternalAppsAccordion on Customer { - id - customerType - # Name in the customer is netsuiteCustomer, but it's used as integrationCustomer in the create update inputs - netsuiteCustomer { - externalCustomerId - integrationCode - integrationType - subsidiaryId - syncWithProvider - } - anrokCustomer { - externalCustomerId - integrationCode - integrationType - syncWithProvider - } - xeroCustomer { - externalCustomerId - integrationCode - integrationType - syncWithProvider - } - hubspotCustomer { - externalCustomerId - integrationCode - integrationType - syncWithProvider - } - salesforceCustomer { - externalCustomerId - integrationCode - integrationType - syncWithProvider - } - } - - query paymentProvidersListForCustomerCreateEditExternalAppsAccordion($limit: Int) { - paymentProviders(limit: $limit) { - collection { - ... on StripeProvider { - __typename - id - name - code - } - - ... on GocardlessProvider { - __typename - id - name - code - } - - ... on AdyenProvider { - __typename - id - name - code - } - } - } - } - - query accountingIntegrationsListForCustomerEditExternalAppsAccordion($limit: Int, $page: Int) { - integrations(limit: $limit, page: $page) { - collection { - ... on NetsuiteIntegration { - __typename - id - code - name - } - ... on AnrokIntegration { - __typename - id - code - name - } - ... on XeroIntegration { - __typename - id - code - name - } - ... on HubspotIntegration { - __typename - id - code - name - defaultTargetedObject - } - ... on SalesforceIntegration { - __typename - id - code - name - } - } - } - } - - query subsidiariesListForCustomerCreateEditExternalAppsAccordion($integrationId: ID) { - integrationSubsidiaries(integrationId: $integrationId) { - collection { - externalId - externalName - } - } - } -` - -type TExternalAppsAccordionProps = { - formikProps: FormikProps - isEdition: boolean -} - -export const ExternalAppsAccordion = ({ formikProps, isEdition }: TExternalAppsAccordionProps) => { - const { translate } = useInternationalization() - - const [getPaymentProvidersData, { data: paymentProvidersData }] = - usePaymentProvidersListForCustomerCreateEditExternalAppsAccordionLazyQuery({ - variables: { limit: 1000 }, - }) - - const [getAccountingIntegrationsData, { data: allIntegrationsData }] = - useAccountingIntegrationsListForCustomerEditExternalAppsAccordionLazyQuery({ - variables: { limit: 1000 }, - }) - - const selectedPaymentProvider = paymentProvidersData?.paymentProviders?.collection.find( - (p) => p.code === formikProps.values.paymentProviderCode, - ) - - const allNetsuiteIntegrations = allIntegrationsData?.integrations?.collection.filter( - (i) => i.__typename === 'NetsuiteIntegration', - ) as NetsuiteIntegration[] | undefined - - const allAnrokIntegrations = allIntegrationsData?.integrations?.collection.filter( - (i) => i.__typename === 'AnrokIntegration', - ) as AnrokIntegration[] | undefined - - const allXeroIntegrations = allIntegrationsData?.integrations?.collection.filter( - (i) => i.__typename === 'XeroIntegration', - ) as XeroIntegration[] | undefined - - const allHubspotIntegrations = allIntegrationsData?.integrations?.collection.filter( - (i) => i.__typename === 'HubspotIntegration', - ) as HubspotIntegration[] | undefined - - const allSalesforceIntegrations = allIntegrationsData?.integrations?.collection.filter( - (i) => i.__typename === 'SalesforceIntegration', - ) as SalesforceIntegration[] | undefined - - const selectedNetsuiteIntegrationIndex = - formikProps.values.integrationCustomers?.findIndex( - (i) => i.integrationType === IntegrationTypeEnum.Netsuite, - ) || 0 - const selectedAnrokIntegrationIndex = - formikProps.values.integrationCustomers?.findIndex( - (i) => i.integrationType === IntegrationTypeEnum.Anrok, - ) || 0 - const selectedXeroIntegrationIndex = - formikProps.values.integrationCustomers?.findIndex( - (i) => i.integrationType === IntegrationTypeEnum.Xero, - ) || 0 - const selectedHubspotIntegrationIndex = - formikProps.values.integrationCustomers?.findIndex( - (i) => i.integrationType === IntegrationTypeEnum.Hubspot, - ) || 0 - const selectedSalesforceIntegrationIndex = - formikProps.values.integrationCustomers?.findIndex( - (i) => i.integrationType === IntegrationTypeEnum.Salesforce, - ) || 0 - - const netsuiteIntegrationpointerInIntegrationCustomer = `integrationCustomers.${selectedNetsuiteIntegrationIndex}` - const anrokIntegrationpointerInIntegration = `integrationCustomers.${selectedAnrokIntegrationIndex}` - const xeroIntegrationpointerInIntegrationCustomer = `integrationCustomers.${selectedXeroIntegrationIndex}` - const hubspotIntegrationpointerInIntegrationCustomer = `integrationCustomers.${selectedHubspotIntegrationIndex}` - const salesforceIntegrationpointerInIntegrationCustomer = `integrationCustomers.${selectedSalesforceIntegrationIndex}` - - const selectedNetsuiteIntegration = - formikProps.values.integrationCustomers?.[selectedNetsuiteIntegrationIndex] - const selectedAnrokIntegration = - formikProps.values.integrationCustomers?.[selectedAnrokIntegrationIndex] - const selectedXeroIntegration = - formikProps.values.integrationCustomers?.[selectedXeroIntegrationIndex] - const selectedHubspotIntegration = - formikProps.values.integrationCustomers?.[selectedHubspotIntegrationIndex] - const selectedSalesforceIntegration = - formikProps.values.integrationCustomers?.[selectedSalesforceIntegrationIndex] - - const selectedNetsuiteIntegrationSettings = allNetsuiteIntegrations?.find( - (i) => i.code === selectedNetsuiteIntegration?.integrationCode, - ) as NetsuiteIntegration - - const selectedAnrokIntegrationSettings = allAnrokIntegrations?.find( - (i) => i.code === selectedAnrokIntegration?.integrationCode, - ) as AnrokIntegration - - const selectedXeroIntegrationSettings = allXeroIntegrations?.find( - (i) => i.code === selectedXeroIntegration?.integrationCode, - ) as XeroIntegration - - const selectedHubspotIntegrationSettings = allHubspotIntegrations?.find( - (i) => i.code === selectedHubspotIntegration?.integrationCode, - ) as HubspotIntegration - - const selectedSalesforceIntegrationSettings = allSalesforceIntegrations?.find( - (i) => i.code === selectedSalesforceIntegration?.integrationCode, - ) as SalesforceIntegration - - const allAccountingIntegrationsData = useMemo(() => { - return [...(allNetsuiteIntegrations || []), ...(allXeroIntegrations || [])] - }, [allNetsuiteIntegrations, allXeroIntegrations]) - - const allCRMIntegrationsData = useMemo(() => { - return [...(allHubspotIntegrations || []), ...(allSalesforceIntegrations || [])] - }, [allHubspotIntegrations, allSalesforceIntegrations]) - - const { data: subsidiariesData } = - useSubsidiariesListForCustomerCreateEditExternalAppsAccordionQuery({ - variables: { integrationId: selectedNetsuiteIntegrationSettings?.id }, - skip: !selectedNetsuiteIntegrationSettings?.id, - }) - - const isSyncWithProviderDisabled = !!formikProps.values.providerCustomer?.syncWithProvider - const hadInitialNetsuiteIntegrationCustomer = - !!formikProps.initialValues.integrationCustomers?.find( - (i) => i.integrationType === IntegrationTypeEnum.Netsuite, - ) - const hadInitialAnrokIntegrationCustomer = !!formikProps.initialValues.integrationCustomers?.find( - (i) => i.integrationType === IntegrationTypeEnum.Anrok, - ) - const hadInitialXeroIntegrationCustomer = !!formikProps.initialValues.integrationCustomers?.find( - (i) => i.integrationType === IntegrationTypeEnum.Xero, - ) - const hadInitialHubspotIntegrationCustomer = - !!formikProps.initialValues.integrationCustomers?.find( - (i) => i.integrationType === IntegrationTypeEnum.Hubspot, - ) - const hadInitialSalesforceIntegrationCustomer = - !!formikProps.initialValues.integrationCustomers?.find( - (i) => i.integrationType === IntegrationTypeEnum.Salesforce, - ) - - const [showPaymentProviderSection, setShowPaymentProviderSection] = useState( - !!formikProps.values.paymentProvider, - ) - const [showAccountingProviderSection, setShowAccountingProviderSection] = useState( - hadInitialNetsuiteIntegrationCustomer || hadInitialXeroIntegrationCustomer, - ) - const [showTaxIntegrationSection, setShowTaxIntegrationSection] = useState( - hadInitialAnrokIntegrationCustomer, - ) - const [showCRMIntegrationSection, setShowCRMIntegrationSection] = useState( - hadInitialHubspotIntegrationCustomer || hadInitialSalesforceIntegrationCustomer, - ) - - const connectedPaymentProvidersData: ComboboxDataGrouped[] | [] = useMemo(() => { - if (!paymentProvidersData?.paymentProviders?.collection.length) return [] - - return paymentProvidersData?.paymentProviders?.collection.map((provider) => ({ - value: provider.code, - label: provider.name, - group: provider.__typename.toLocaleLowerCase().replace('provider', ''), - labelNode: ( - - - {provider.name} - -   - - ({provider.code}) - - - ), - })) - }, [paymentProvidersData?.paymentProviders?.collection]) - - const connectedAccountingIntegrationsData: ComboboxDataGrouped[] | [] = useMemo(() => { - if (!allAccountingIntegrationsData?.length) return [] - - return allAccountingIntegrationsData?.map((integration) => ({ - value: integration.code, - label: integration.name, - group: integration?.__typename?.replace('Integration', '') || '', - labelNode: ( - - - {integration.name} - -   - - ({integration.code}) - - - ), - })) - }, [allAccountingIntegrationsData]) - - 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: ( - - - {integrationSubsidiary.externalName} - -   - - ({integrationSubsidiary.externalId}) - - - ), - })) - }, [subsidiariesData?.integrationSubsidiaries?.collection]) - - const connectedAnrokIntegrationsData: BasicComboBoxData[] | [] = useMemo(() => { - if (!allAnrokIntegrations?.length) return [] - - return allAnrokIntegrations?.map((integration) => ({ - value: integration.code, - label: integration.name, - labelNode: ( - - - {integration.name} - -   - - ({integration.code}) - - - ), - })) - }, [allAnrokIntegrations]) - - const connectedCRMIntegrationsData: ComboboxDataGrouped[] | [] = useMemo(() => { - if (!allCRMIntegrationsData?.length) return [] - - return allCRMIntegrationsData?.map((integration) => ({ - value: integration.code, - label: integration.name, - group: integration?.__typename?.replace('Integration', '') || '', - labelNode: ( - - - {integration.name} - -   - - ({integration.code}) - - - ), - })) - }, [allCRMIntegrationsData]) - - useEffect(() => { - setShowPaymentProviderSection(!!formikProps.values.paymentProvider) - }, [formikProps.values.paymentProvider]) - - useEffect(() => { - setShowAccountingProviderSection( - hadInitialNetsuiteIntegrationCustomer || hadInitialXeroIntegrationCustomer, - ) - }, [hadInitialNetsuiteIntegrationCustomer, hadInitialXeroIntegrationCustomer]) - - useEffect(() => { - setShowTaxIntegrationSection(hadInitialAnrokIntegrationCustomer) - }, [hadInitialAnrokIntegrationCustomer]) - - useEffect(() => { - setShowCRMIntegrationSection( - hadInitialHubspotIntegrationCustomer || hadInitialSalesforceIntegrationCustomer, - ) - }, [hadInitialHubspotIntegrationCustomer, hadInitialSalesforceIntegrationCustomer]) - - return ( - { - getPaymentProvidersData() - getAccountingIntegrationsData() - }} - summary={ - - - {translate('text_66423cad72bbad009f2f5689')} - - } - > - -
- - {translate('text_66423dbab233e60111c49461')} - - -
- {showPaymentProviderSection && ( - - - {translate('text_634ea0ecc6147de10ddb6631')} - - - - {!!formikProps.values.paymentProvider ? ( - - {formikProps.values.paymentProvider === ProviderTypeEnum?.Stripe ? ( - - ) : formikProps.values.paymentProvider === ProviderTypeEnum?.Gocardless ? ( - - ) : formikProps.values.paymentProvider === ProviderTypeEnum?.Adyen ? ( - - ) : null} - - ) : ( - - - - )} - - - {!selectedPaymentProvider - ? translate('text_66423cad72bbad009f2f5691') - : selectedPaymentProvider.name} - - {!!selectedPaymentProvider?.code && ( - {selectedPaymentProvider.code} - )} - - - - - } - > - {({ closePopper }) => ( - - - - - - - - - )} - - {isSyncWithProviderDisabled && - (formikProps.values.paymentProvider === ProviderTypeEnum.Gocardless || - formikProps.values.paymentProvider === ProviderTypeEnum.Adyen) && ( - - {formikProps.values.paymentProvider === ProviderTypeEnum.Gocardless - ? translate('text_635bdbda84c98758f9bba8ae') - : translate('text_645d0728ea0a5a7bbf76d5c9')} - - )} - - - ) -} - -ExternalAppsAccordion.displayName = 'ExternalAppsAccordion' - -const StripeOptionsGridWrapper = styled.div` - display: grid; - grid-template-columns: 1fr 1fr; - gap: ${theme.spacing(4)}; -` - -const InlineSummaryForExternalApps = styled.div` - display: flex; - align-items: center; -` - -const LocalPSPIcons = styled(PSPIcons)` - height: 24px; - margin-right: ${theme.spacing(3)}; -` diff --git a/src/components/customers/addDrawer/ExternalAppsAccordion/AccountingProvidersAccordion.tsx b/src/components/customers/addDrawer/ExternalAppsAccordion/AccountingProvidersAccordion.tsx new file mode 100644 index 000000000..c2d6dd826 --- /dev/null +++ b/src/components/customers/addDrawer/ExternalAppsAccordion/AccountingProvidersAccordion.tsx @@ -0,0 +1,340 @@ +import { gql } from '@apollo/client' +import { FormikProps } from 'formik' +import { Dispatch, FC, SetStateAction, useMemo } from 'react' + +import { Accordion, Alert, Avatar, Typography } from '~/components/designSystem' +import { + BasicComboBoxData, + Checkbox, + ComboBox, + ComboboxDataGrouped, + ComboBoxField, + TextInputField, +} from '~/components/form' +import { ADD_CUSTOMER_ACCOUNTING_PROVIDER_ACCORDION } from '~/core/constants/form' +import { + CreateCustomerInput, + IntegrationTypeEnum, + NetsuiteIntegration, + UpdateCustomerInput, + useGetAccountingIntegrationsForExternalAppsAccordionQuery, + useSubsidiariesListForExternalAppsAccordionQuery, + XeroIntegration, +} from '~/generated/graphql' +import { useInternationalization } from '~/hooks/core/useInternationalization' +import Netsuite from '~/public/images/netsuite.svg' +import Xero from '~/public/images/xero.svg' + +import { ExternalAppsAccordionLayout } from './ExternalAppsAccordionLayout' +import { getIntegration } from './utils' + +gql` + query getAccountingIntegrationsForExternalAppsAccordion($limit: Int, $page: Int) { + integrations(limit: $limit, page: $page) { + collection { + ... on NetsuiteIntegration { + __typename + id + code + name + } + ... on XeroIntegration { + __typename + id + code + name + } + } + } + } + + query subsidiariesListForExternalAppsAccordion($integrationId: ID) { + integrationSubsidiaries(integrationId: $integrationId) { + collection { + externalId + externalName + } + } + } +` + +interface AccountingProvidersAccordionProps { + formikProps: FormikProps + setShowAccountingSection: Dispatch> + isEdition: boolean +} + +export const AccountingProvidersAccordion: FC = ({ + formikProps, + setShowAccountingSection, + isEdition, +}) => { + const { translate } = useInternationalization() + + const { data: allIntegrationsData, loading } = + useGetAccountingIntegrationsForExternalAppsAccordionQuery({ + variables: { limit: 1000 }, + }) + + const { + hadInitialIntegrationCustomer: hadInitialNetsuiteIntegrationCustomer, + selectedIntegration: selectedNetsuiteIntegration, + integrationPointerInIntegrationCustomer: netsuiteIntegrationPointerInIntegrationCustomer, + allIntegrations: allNetsuiteIntegrations, + selectedIntegrationSettings: selectedNetsuiteIntegrationSettings, + } = getIntegration({ + integrationType: IntegrationTypeEnum.Netsuite, + allIntegrationsData, + formikProps, + }) + + // Only fetch subsidiaries if there is a selected Netsuite integration + const { data: subsidiariesData } = useSubsidiariesListForExternalAppsAccordionQuery({ + variables: { integrationId: selectedNetsuiteIntegrationSettings?.id }, + skip: !selectedNetsuiteIntegrationSettings?.id, + }) + + const { + hadInitialIntegrationCustomer: hadInitialXeroIntegrationCustomer, + selectedIntegration: selectedXeroIntegration, + integrationPointerInIntegrationCustomer: xeroIntegrationPointerInIntegrationCustomer, + allIntegrations: allXeroIntegrations, + selectedIntegrationSettings: selectedXeroIntegrationSettings, + } = getIntegration({ + integrationType: IntegrationTypeEnum.Xero, + allIntegrationsData, + formikProps, + }) + + const selectedIntegration = selectedNetsuiteIntegration || selectedXeroIntegration + const selectedIntegrationSettings = + selectedNetsuiteIntegrationSettings || selectedXeroIntegrationSettings + + const allAccountingIntegrationsData = useMemo(() => { + return [...(allNetsuiteIntegrations || []), ...(allXeroIntegrations || [])] + }, [allNetsuiteIntegrations, allXeroIntegrations]) + + const connectedAccountingIntegrationsData: ComboboxDataGrouped[] | [] = useMemo(() => { + if (!allAccountingIntegrationsData?.length) return [] + + return allAccountingIntegrationsData?.map((integration) => ({ + value: integration.code, + label: integration.name, + group: integration?.__typename?.replace('Integration', '') || '', + labelNode: ( + + ), + })) + }, [allAccountingIntegrationsData]) + + const connectedIntegrationSubsidiaries: BasicComboBoxData[] | [] = useMemo(() => { + if (!subsidiariesData?.integrationSubsidiaries?.collection.length) return [] + + return subsidiariesData?.integrationSubsidiaries?.collection.map((integrationSubsidiary) => ({ + value: integrationSubsidiary.externalId, + label: `${integrationSubsidiary.externalName} (${integrationSubsidiary.externalId})`, + labelNode: ( + + ), + })) + }, [subsidiariesData?.integrationSubsidiaries?.collection]) + + return ( +
+ + {translate('text_66423cad72bbad009f2f568f')} + + + {selectedIntegration.integrationType === IntegrationTypeEnum.Netsuite && ( + + )} + {selectedIntegration.integrationType === IntegrationTypeEnum.Xero && } + + ) + } + label={selectedIntegrationSettings?.name} + subLabel={selectedIntegrationSettings?.code} + onDelete={() => { + formikProps.setFieldValue( + 'integrationCustomers', + formikProps.values.integrationCustomers?.filter( + (i) => + i.integrationType !== IntegrationTypeEnum.Netsuite && + i.integrationType !== IntegrationTypeEnum.Xero, + ), + ) + setShowAccountingSection(false) + }} + /> + } + > +
+ + {translate('text_65e1f90471bc198c0c934d6c')} + + + {/* Select Integration account */} + { + const isValueAlreadyPresent = formikProps.values.integrationCustomers?.some( + (i) => i.integrationCode === value, + ) + + if (!!value && !isValueAlreadyPresent) { + // By default, remove existing accounting integration, will be added back if value is present + const newIntegrationCustomers = + formikProps.values.integrationCustomers?.filter( + (i) => + i.integrationType !== IntegrationTypeEnum.Netsuite && + i.integrationType !== IntegrationTypeEnum.Xero, + ) || [] + + const selectedAccountingIntegration = allAccountingIntegrationsData.find( + (i) => i.code === value, + ) + + const newAccountingIntegrationObject = { + integrationCode: value, + integrationType: selectedAccountingIntegration?.__typename + ?.toLowerCase() + .replace('integration', '') as IntegrationTypeEnum, + syncWithProvider: false, + } + + newIntegrationCustomers.push(newAccountingIntegrationObject) + + formikProps.setFieldValue('integrationCustomers', newIntegrationCustomers) + } + }} + /> + + {!!selectedNetsuiteIntegration && ( + <> + + + { + const newNetsuiteIntegrationObject = { + ...selectedNetsuiteIntegration, + syncWithProvider: checked, + } + + if (!isEdition && checked) { + newNetsuiteIntegrationObject.externalCustomerId = '' + newNetsuiteIntegrationObject.subsidiaryId = '' + } + + formikProps.setFieldValue( + `${netsuiteIntegrationPointerInIntegrationCustomer}`, + newNetsuiteIntegrationObject, + ) + }} + /> + + {!!selectedNetsuiteIntegration?.syncWithProvider && ( + <> + + + {isEdition && !hadInitialNetsuiteIntegrationCustomer && ( + {translate('text_66423cad72bbad009f2f56a4')} + )} + + )} + + )} + + {!!selectedXeroIntegration && ( + <> + + + { + const newXeroIntegrationObject = { + ...selectedXeroIntegration, + syncWithProvider: checked, + } + + if (!isEdition && checked) { + newXeroIntegrationObject.externalCustomerId = '' + } + + formikProps.setFieldValue( + `${xeroIntegrationPointerInIntegrationCustomer}`, + newXeroIntegrationObject, + ) + }} + /> + + )} + + {isEdition && + !!selectedXeroIntegration?.syncWithProvider && + !hadInitialXeroIntegrationCustomer && ( + {translate('text_667d39dc1a765800d28d0607')} + )} +
+ +
+ ) +} diff --git a/src/components/customers/addDrawer/ExternalAppsAccordion/CRMProvidersAccordion.tsx b/src/components/customers/addDrawer/ExternalAppsAccordion/CRMProvidersAccordion.tsx new file mode 100644 index 000000000..a05f50b23 --- /dev/null +++ b/src/components/customers/addDrawer/ExternalAppsAccordion/CRMProvidersAccordion.tsx @@ -0,0 +1,381 @@ +import { gql } from '@apollo/client' +import { FormikProps } from 'formik' +import { Dispatch, FC, SetStateAction, useMemo } from 'react' + +import { Accordion, Alert, Avatar, Typography } from '~/components/designSystem' +import { + Checkbox, + ComboBox, + ComboboxDataGrouped, + ComboBoxField, + TextInputField, +} from '~/components/form' +import { + ADD_CUSTOMER_CRM_PROVIDER_ACCORDION, + getHubspotTargetedObjectTranslationKey, +} from '~/core/constants/form' +import { + CreateCustomerInput, + CustomerTypeEnum, + HubspotIntegration, + HubspotTargetedObjectsEnum, + IntegrationTypeEnum, + SalesforceIntegration, + UpdateCustomerInput, + useGetCrmIntegrationsForExternalAppsAccordionQuery, +} from '~/generated/graphql' +import { useInternationalization } from '~/hooks/core/useInternationalization' +import Hubspot from '~/public/images/hubspot.svg' +import Salesforce from '~/public/images/salesforce.svg' + +import { ExternalAppsAccordionLayout } from './ExternalAppsAccordionLayout' +import { getIntegration } from './utils' + +gql` + query getCrmIntegrationsForExternalAppsAccordion($limit: Int, $page: Int) { + integrations(limit: $limit, page: $page) { + collection { + ... on HubspotIntegration { + __typename + id + code + name + defaultTargetedObject + } + ... on SalesforceIntegration { + __typename + id + code + name + } + } + } + } +` + +const hubspotExternalIdTypeCopyMap: Record< + HubspotTargetedObjectsEnum, + Record<'label' | 'placeholder', string> +> = { + [HubspotTargetedObjectsEnum.Companies]: { + label: 'text_1729602057769exfgebgaj4g', + placeholder: 'text_1729602057769w37ljj318sn', + }, + [HubspotTargetedObjectsEnum.Contacts]: { + label: 'text_1729067791880uwec7af9cpq', + placeholder: 'text_1729067791880y0th6mtz2av', + }, +} + +interface CRMProvidersAccordionProps { + formikProps: FormikProps + setShowCRMSection: Dispatch> + isEdition: boolean +} + +export const CRMProvidersAccordion: FC = ({ + formikProps, + setShowCRMSection, + isEdition, +}) => { + const { translate } = useInternationalization() + + const { data: allIntegrationsData, loading } = useGetCrmIntegrationsForExternalAppsAccordionQuery( + { variables: { limit: 1000 } }, + ) + + const { + hadInitialIntegrationCustomer: hadInitialHubspotIntegrationCustomer, + selectedIntegration: selectedHubspotIntegration, + allIntegrations: allHubspotIntegrations, + integrationPointerInIntegrationCustomer: hubspotIntegrationPointerInIntegrationCustomer, + selectedIntegrationSettings: selectedHubspotIntegrationSettings, + } = getIntegration({ + integrationType: IntegrationTypeEnum.Hubspot, + formikProps, + allIntegrationsData, + }) + + const { + hadInitialIntegrationCustomer: hadInitialSalesforceIntegrationCustomer, + selectedIntegration: selectedSalesforceIntegration, + allIntegrations: allSalesforceIntegrations, + integrationPointerInIntegrationCustomer: salesforceIntegrationPointerInIntegrationCustomer, + selectedIntegrationSettings: selectedSalesforceIntegrationSettings, + } = getIntegration({ + integrationType: IntegrationTypeEnum.Salesforce, + formikProps, + allIntegrationsData, + }) + + const selectedIntegration = selectedHubspotIntegration || selectedSalesforceIntegration + const selectedIntegrationSettings = + selectedHubspotIntegrationSettings || selectedSalesforceIntegrationSettings + + const allCRMIntegrationsData = useMemo(() => { + return [...(allHubspotIntegrations || []), ...(allSalesforceIntegrations || [])] + }, [allHubspotIntegrations, allSalesforceIntegrations]) + + const connectedCRMIntegrationsData: ComboboxDataGrouped[] | [] = useMemo(() => { + if (!allCRMIntegrationsData?.length) return [] + + return allCRMIntegrationsData?.map((integration) => ({ + value: integration.code, + label: integration.name, + group: integration?.__typename?.replace('Integration', '') || '', + labelNode: ( + + ), + })) + }, [allCRMIntegrationsData]) + + return ( +
+ + {translate('text_1728658962985xpfdvl5ru8a')} + + + {selectedIntegration.integrationType === IntegrationTypeEnum.Hubspot && ( + + )} + {selectedIntegration.integrationType === IntegrationTypeEnum.Salesforce && ( + + )} + + ) + } + label={selectedIntegrationSettings?.name} + subLabel={selectedIntegrationSettings?.code} + onDelete={() => { + formikProps.setFieldValue( + 'integrationCustomers', + formikProps.values.integrationCustomers?.filter( + (i) => + i.integrationType !== IntegrationTypeEnum.Hubspot && + i.integrationType !== IntegrationTypeEnum.Salesforce, + ), + ) + setShowCRMSection(false) + }} + /> + } + > +
+ + {translate('text_65e1f90471bc198c0c934d6c')} + + + {/* Select connected account */} + { + const localSelectedIntegration = connectedCRMIntegrationsData.find( + (data) => data.value === value, + ) + + if (localSelectedIntegration?.group === 'Hubspot') { + let localDefaultTargetedObject + + if (formikProps.values.customerType === CustomerTypeEnum.Company) { + localDefaultTargetedObject = HubspotTargetedObjectsEnum.Companies + } else if (formikProps.values.customerType === CustomerTypeEnum.Individual) { + localDefaultTargetedObject = HubspotTargetedObjectsEnum.Contacts + } else { + const { defaultTargetedObject } = allHubspotIntegrations?.find( + (i) => i.code === value, + ) as HubspotIntegration + + localDefaultTargetedObject = defaultTargetedObject + } + + const newHubspotIntegrationObject = { + integrationCode: value, + integrationType: IntegrationTypeEnum.Hubspot, + syncWithProvider: false, + targetedObject: localDefaultTargetedObject, + } + + // If no existing hubspot integration, add it + if (!selectedHubspotIntegration) { + formikProps.setFieldValue('integrationCustomers', [ + ...(formikProps.values.integrationCustomers || []), + newHubspotIntegrationObject, + ]) + } else { + // If existing hubspot integration, update it + formikProps.setFieldValue( + `${hubspotIntegrationPointerInIntegrationCustomer}`, + newHubspotIntegrationObject, + ) + } + } else if (localSelectedIntegration?.group === 'Salesforce') { + const newSalesforceIntegrationObject = { + integrationCode: value, + integrationType: IntegrationTypeEnum.Salesforce, + syncWithProvider: false, + } + + // If no existing salesforce integration, add it + if (!selectedSalesforceIntegration) { + formikProps.setFieldValue('integrationCustomers', [ + ...(formikProps.values.integrationCustomers || []), + newSalesforceIntegrationObject, + ]) + } else { + // If existing salesforce integration, update it + formikProps.setFieldValue( + `${salesforceIntegrationPointerInIntegrationCustomer}`, + newSalesforceIntegrationObject, + ) + } + } + }} + /> + + {!!selectedHubspotIntegration && ( + <> + + + {!!selectedHubspotIntegration.targetedObject && ( + <> + + + { + const newHubspotIntegrationObject = { + ...selectedHubspotIntegration, + syncWithProvider: checked, + } + + if (!isEdition && checked) { + newHubspotIntegrationObject.externalCustomerId = '' + } + + formikProps.setFieldValue( + `${hubspotIntegrationPointerInIntegrationCustomer}`, + newHubspotIntegrationObject, + ) + }} + /> + + )} + + )} + + {!!selectedSalesforceIntegration && ( + <> + + { + const newSalesforceIntegrationObject = { + ...selectedSalesforceIntegration, + syncWithProvider: checked, + } + + if (!isEdition && checked) { + newSalesforceIntegrationObject.externalCustomerId = '' + } + + formikProps.setFieldValue( + `${salesforceIntegrationPointerInIntegrationCustomer}`, + newSalesforceIntegrationObject, + ) + }} + /> + + )} + + {isEdition && + !!selectedHubspotIntegration?.syncWithProvider && + !hadInitialHubspotIntegrationCustomer && ( + {translate('text_1729067791880abj1lzd7dn9')} + )} +
+ +
+ ) +} diff --git a/src/components/customers/addDrawer/ExternalAppsAccordion/ExternalAppsAccordionLayout.tsx b/src/components/customers/addDrawer/ExternalAppsAccordion/ExternalAppsAccordionLayout.tsx new file mode 100644 index 000000000..6cc9a63b6 --- /dev/null +++ b/src/components/customers/addDrawer/ExternalAppsAccordion/ExternalAppsAccordionLayout.tsx @@ -0,0 +1,64 @@ +import { FC, ReactNode } from 'react' + +import { Avatar, Button, Icon, Skeleton, Typography } from '~/components/designSystem' +import { ComboboxItem } from '~/components/form' +import { useInternationalization } from '~/hooks/core/useInternationalization' + +const ExternalAppsAccordionComboboxItem: FC<{ + label: string + subLabel: string +}> = ({ label, subLabel }) => { + return ( + + + {label} + +   + + ({subLabel}) + + + ) +} + +const ExternalAppsAccordionSummary: FC<{ + avatar?: ReactNode + onDelete?: () => void + label?: string + subLabel?: string + loading?: boolean +}> = ({ avatar, label, subLabel, loading, onDelete }) => { + const { translate } = useInternationalization() + + return ( +
+ {loading ? ( +
+ + +
+ ) : ( +
+ {avatar || ( + + + + )} +
+ + {label ?? translate('text_66423cad72bbad009f2f5691')} + + {subLabel && {subLabel}} +
+
+ )} + + {!loading && onDelete &&
+ ) +} + +export const ExternalAppsAccordionLayout = { + ComboboxItem: ExternalAppsAccordionComboboxItem, + Summary: ExternalAppsAccordionSummary, +} diff --git a/src/components/customers/addDrawer/ExternalAppsAccordion/PaymentProvidersAccordion.tsx b/src/components/customers/addDrawer/ExternalAppsAccordion/PaymentProvidersAccordion.tsx new file mode 100644 index 000000000..8bf216469 --- /dev/null +++ b/src/components/customers/addDrawer/ExternalAppsAccordion/PaymentProvidersAccordion.tsx @@ -0,0 +1,386 @@ +import { gql } from '@apollo/client' +import { FormikProps } from 'formik' +import { Dispatch, FC, ReactNode, SetStateAction, useMemo } from 'react' + +import { Accordion, Alert, Avatar, Typography } from '~/components/designSystem' +import { Checkbox, ComboBox, ComboboxDataGrouped, TextInputField } from '~/components/form' +import { ADD_CUSTOMER_PAYMENT_PROVIDER_ACCORDION } from '~/core/constants/form' +import { + CreateCustomerInput, + CurrencyEnum, + ProviderPaymentMethodsEnum, + ProviderTypeEnum, + UpdateCustomerInput, + usePaymentProvidersListForCustomerCreateEditExternalAppsAccordionQuery, +} from '~/generated/graphql' +import { useInternationalization } from '~/hooks/core/useInternationalization' +import Adyen from '~/public/images/adyen.svg' +import GoCardless from '~/public/images/gocardless.svg' +import Stripe from '~/public/images/stripe.svg' + +import { ExternalAppsAccordionLayout } from './ExternalAppsAccordionLayout' + +gql` + query paymentProvidersListForCustomerCreateEditExternalAppsAccordion($limit: Int) { + paymentProviders(limit: $limit) { + collection { + ... on StripeProvider { + __typename + id + name + code + } + + ... on GocardlessProvider { + __typename + id + name + code + } + + ... on AdyenProvider { + __typename + id + name + code + } + } + } + } +` + +interface PaymentProvidersAccordionProps { + formikProps: FormikProps + setShowPaymentSection: Dispatch> +} + +const avatarMapping: Record = { + [ProviderTypeEnum.Stripe]: , + [ProviderTypeEnum.Gocardless]: , + [ProviderTypeEnum.Adyen]: , +} + +export const PaymentProvidersAccordion: FC = ({ + formikProps, + setShowPaymentSection, +}) => { + const { translate } = useInternationalization() + const { data: { paymentProviders } = {}, loading } = + usePaymentProvidersListForCustomerCreateEditExternalAppsAccordionQuery({ + variables: { limit: 1000 }, + }) + + const selectedPaymentProvider = paymentProviders?.collection.find( + (p) => p.code === formikProps.values.paymentProviderCode, + ) + + const isSyncWithProviderDisabled = !!formikProps.values.providerCustomer?.syncWithProvider + + const connectedPaymentProvidersData: ComboboxDataGrouped[] | [] = useMemo(() => { + if (!paymentProviders?.collection.length) return [] + + return paymentProviders?.collection.map((provider) => ({ + value: provider.code, + label: provider.name, + group: provider.__typename.toLocaleLowerCase().replace('provider', ''), + labelNode: ( + + ), + })) + }, [paymentProviders?.collection]) + + return ( +
+ + {translate('text_634ea0ecc6147de10ddb6631')} + + + {avatarMapping[formikProps.values.paymentProvider]} + + ) + } + label={selectedPaymentProvider?.name} + subLabel={selectedPaymentProvider?.code} + onDelete={() => { + formikProps.setFieldValue('paymentProvider', null) + formikProps.setFieldValue('providerCustomer.providerCustomerId', '') + formikProps.setFieldValue('providerCustomer.syncWithProvider', false) + formikProps.setFieldValue( + 'providerCustomer.providerPaymentMethods', + formikProps.values.currency !== CurrencyEnum.Eur + ? [ProviderPaymentMethodsEnum.Card] + : [ProviderPaymentMethodsEnum.Card, ProviderPaymentMethodsEnum.SepaDebit], + ) + setShowPaymentSection(false) + }} + /> + } + > +
+
+ + {translate('text_65e1f90471bc198c0c934d6c')} + + + {/* Select connected account */} + { + formikProps.setFieldValue('paymentProviderCode', value) + const selectedProvider = connectedPaymentProvidersData.find( + (provider) => provider.value === value, + )?.group + + // Set paymentProvider depending on selected value + formikProps.setFieldValue('paymentProvider', selectedProvider as ProviderTypeEnum) + }} + /> + + {!!formikProps.values.paymentProviderCode && ( + <> + + + provider.value === formikProps.values.paymentProviderCode, + )?.label + }` + : '' + }`} + onChange={(e, checked) => { + const newProviderCustomer = { ...formikProps.values.providerCustomer } + + newProviderCustomer.syncWithProvider = checked + if (checked) { + newProviderCustomer.providerCustomerId = '' + } + formikProps.setFieldValue('providerCustomer', newProviderCustomer) + }} + /> + + )} +
+ + {formikProps.values.paymentProvider === ProviderTypeEnum.Stripe && ( +
+
+ + {translate('text_64aeb7b998c4322918c84204')} + + + {translate('text_64aeb7b998c4322918c84210')} + +
+ +
+ + {translate('text_65e1f90471bc198c0c934d82')} + +
+ { + const newValue = [ + ...(formikProps.values.providerCustomer?.providerPaymentMethods || []), + ] + + if (checked) { + newValue.push(ProviderPaymentMethodsEnum.Card) + } else { + newValue.splice(newValue.indexOf(ProviderPaymentMethodsEnum.Card), 1) + // Link cannot be selected without card + newValue.splice(newValue.indexOf(ProviderPaymentMethodsEnum.Link), 1) + } + + formikProps.setFieldValue('providerCustomer.providerPaymentMethods', newValue) + }} + /> + + { + const newValue = [ + ...(formikProps.values.providerCustomer?.providerPaymentMethods || []), + ] + + if (checked) { + newValue.push(ProviderPaymentMethodsEnum.Link) + } else { + newValue.splice(newValue.indexOf(ProviderPaymentMethodsEnum.Link), 1) + } + + formikProps.setFieldValue('providerCustomer.providerPaymentMethods', newValue) + }} + /> +
+
+
+ + {translate('text_65e1f90471bc198c0c934d88')} + + +
+ { + const newValue = [ + ...(formikProps.values.providerCustomer?.providerPaymentMethods || []), + ] + + if (checked) { + newValue.push(ProviderPaymentMethodsEnum.SepaDebit) + } else { + newValue.splice(newValue.indexOf(ProviderPaymentMethodsEnum.SepaDebit), 1) + } + + formikProps.setFieldValue('providerCustomer.providerPaymentMethods', newValue) + }} + /> + + { + const newValue = [ + ...(formikProps.values.providerCustomer?.providerPaymentMethods || []), + ] + + if (checked) { + newValue.push(ProviderPaymentMethodsEnum.UsBankAccount) + } else { + newValue.splice( + newValue.indexOf(ProviderPaymentMethodsEnum.UsBankAccount), + 1, + ) + } + + formikProps.setFieldValue('providerCustomer.providerPaymentMethods', newValue) + }} + /> + { + const newValue = [ + ...(formikProps.values.providerCustomer?.providerPaymentMethods || []), + ] + + if (checked) { + newValue.push(ProviderPaymentMethodsEnum.BacsDebit) + } else { + newValue.splice(newValue.indexOf(ProviderPaymentMethodsEnum.BacsDebit), 1) + } + + formikProps.setFieldValue('providerCustomer.providerPaymentMethods', newValue) + }} + /> +
+
+ + {translate('text_64aeb7b998c4322918c84214')} +
+ )} +
+ +
+ ) +} diff --git a/src/components/customers/addDrawer/ExternalAppsAccordion/TaxProvidersAccordion.tsx b/src/components/customers/addDrawer/ExternalAppsAccordion/TaxProvidersAccordion.tsx new file mode 100644 index 000000000..8394fc07a --- /dev/null +++ b/src/components/customers/addDrawer/ExternalAppsAccordion/TaxProvidersAccordion.tsx @@ -0,0 +1,190 @@ +import { gql } from '@apollo/client' +import { FormikProps } from 'formik' +import { Dispatch, FC, SetStateAction, useMemo } from 'react' + +import { Accordion, Avatar, Typography } from '~/components/designSystem' +import { BasicComboBoxData, Checkbox, ComboBox, TextInputField } from '~/components/form' +import { ADD_CUSTOMER_TAX_PROVIDER_ACCORDION } from '~/core/constants/form' +import { + AnrokIntegration, + CreateCustomerInput, + IntegrationTypeEnum, + UpdateCustomerInput, + useGetTaxIntegrationsForExternalAppsAccordionQuery, +} from '~/generated/graphql' +import { useInternationalization } from '~/hooks/core/useInternationalization' +import Anrok from '~/public/images/anrok.svg' + +import { ExternalAppsAccordionLayout } from './ExternalAppsAccordionLayout' +import { getIntegration } from './utils' + +gql` + query getTaxIntegrationsForExternalAppsAccordion($limit: Int, $page: Int) { + integrations(limit: $limit, page: $page) { + collection { + ... on AnrokIntegration { + __typename + id + code + name + } + } + } + } +` + +interface TaxProvidersAccordionProps { + formikProps: FormikProps + setShowTaxSection: Dispatch> + isEdition: boolean +} + +export const TaxProvidersAccordion: FC = ({ + formikProps, + setShowTaxSection, + isEdition, +}) => { + const { translate } = useInternationalization() + + const { data: allIntegrationsData, loading } = useGetTaxIntegrationsForExternalAppsAccordionQuery( + { variables: { limit: 1000 } }, + ) + + const { + hadInitialIntegrationCustomer: hadInitialAnrokIntegrationCustomer, + selectedIntegration: selectedAnrokIntegration, + allIntegrations: allAnrokIntegrations, + integrationPointerInIntegrationCustomer: anrokIntegrationPointerInIntegration, + selectedIntegrationSettings: selectedAnrokIntegrationSettings, + } = getIntegration({ + integrationType: IntegrationTypeEnum.Anrok, + formikProps, + allIntegrationsData, + }) + + const connectedAnrokIntegrationsData: BasicComboBoxData[] | [] = useMemo(() => { + if (!allAnrokIntegrations?.length) return [] + + return allAnrokIntegrations?.map((integration) => ({ + value: integration.code, + label: integration.name, + labelNode: ( + + ), + })) + }, [allAnrokIntegrations]) + + return ( +
+ + {translate('text_6668821d94e4da4dfd8b3840')} + + + + + ) + } + label={selectedAnrokIntegrationSettings?.name} + subLabel={selectedAnrokIntegrationSettings?.code} + onDelete={() => { + formikProps.setFieldValue( + 'integrationCustomers', + formikProps.values.integrationCustomers?.filter( + (i) => i.integrationType !== IntegrationTypeEnum.Anrok, + ), + ) + setShowTaxSection(false) + }} + /> + } + > +
+ + {translate('text_65e1f90471bc198c0c934d6c')} + + + {/* Select connected account */} + { + const newAnrokIntegrationObject = { + integrationCode: value, + integrationType: IntegrationTypeEnum.Anrok, + syncWithProvider: false, + } + + // If no existing anrok integration, add it + if (!selectedAnrokIntegration) { + formikProps.setFieldValue('integrationCustomers', [ + ...(formikProps.values.integrationCustomers || []), + newAnrokIntegrationObject, + ]) + } else { + // If existing anrok integration, update it + formikProps.setFieldValue( + `${anrokIntegrationPointerInIntegration}`, + newAnrokIntegrationObject, + ) + } + }} + /> + + {!!selectedAnrokIntegration && ( + <> + + + { + const newAnrokIntegrationObject = { + ...selectedAnrokIntegration, + syncWithProvider: checked, + } + + if (!isEdition && checked) { + newAnrokIntegrationObject.externalCustomerId = '' + } + + formikProps.setFieldValue( + `${anrokIntegrationPointerInIntegration}`, + newAnrokIntegrationObject, + ) + }} + /> + + )} +
+ +
+ ) +} diff --git a/src/components/customers/addDrawer/ExternalAppsAccordion/index.tsx b/src/components/customers/addDrawer/ExternalAppsAccordion/index.tsx new file mode 100644 index 000000000..af7677360 --- /dev/null +++ b/src/components/customers/addDrawer/ExternalAppsAccordion/index.tsx @@ -0,0 +1,212 @@ +import { FormikProps } from 'formik' +import { useEffect, useState } from 'react' + +import { Accordion, Alert, Button, Popper, Typography } from '~/components/designSystem' +import { + ADD_CUSTOMER_ACCOUNTING_PROVIDER_ACCORDION, + ADD_CUSTOMER_CRM_PROVIDER_ACCORDION, + ADD_CUSTOMER_PAYMENT_PROVIDER_ACCORDION, + ADD_CUSTOMER_TAX_PROVIDER_ACCORDION, + MUI_BUTTON_BASE_ROOT_CLASSNAME, +} from '~/core/constants/form' +import { INTEGRATIONS_ROUTE } from '~/core/router' +import { + CreateCustomerInput, + IntegrationTypeEnum, + ProviderTypeEnum, + UpdateCustomerInput, +} from '~/generated/graphql' +import { useInternationalization } from '~/hooks/core/useInternationalization' +import PSPIcons from '~/public/images/psp-icons.svg' +import { MenuPopper } from '~/styles' + +import { AccountingProvidersAccordion } from './AccountingProvidersAccordion' +import { CRMProvidersAccordion } from './CRMProvidersAccordion' +import { PaymentProvidersAccordion } from './PaymentProvidersAccordion' +import { TaxProvidersAccordion } from './TaxProvidersAccordion' +import { scrollToIntegration } from './utils' + +type TExternalAppsAccordionProps = { + formikProps: FormikProps + isEdition: boolean +} + +export const ExternalAppsAccordion = ({ formikProps, isEdition }: TExternalAppsAccordionProps) => { + const { translate } = useInternationalization() + + const hadInitialAccountingProvider = !!formikProps.values.integrationCustomers?.find((i) => + [IntegrationTypeEnum.Netsuite, IntegrationTypeEnum.Xero].includes( + i.integrationType as IntegrationTypeEnum, + ), + ) + const hadInitialTaxProvider = !!formikProps.values.integrationCustomers?.find((i) => + [IntegrationTypeEnum.Anrok].includes(i.integrationType as IntegrationTypeEnum), + ) + const hadInitialCRMProvider = !!formikProps.values.integrationCustomers?.find((i) => + [IntegrationTypeEnum.Hubspot, IntegrationTypeEnum.Salesforce].includes( + i.integrationType as IntegrationTypeEnum, + ), + ) + + const [showPaymentSection, setShowPaymentSection] = useState(!!formikProps.values.paymentProvider) + const [showAccountingSection, setShowAccountingSection] = useState(hadInitialAccountingProvider) + const [showTaxSection, setShowTaxSection] = useState(hadInitialTaxProvider) + const [showCRMSection, setShowCRMSection] = useState(hadInitialCRMProvider) + + useEffect(() => { + setShowPaymentSection(!!formikProps.values.paymentProvider) + }, [formikProps.values.paymentProvider]) + + useEffect( + () => setShowAccountingSection(hadInitialAccountingProvider), + [hadInitialAccountingProvider], + ) + useEffect(() => setShowTaxSection(hadInitialTaxProvider), [hadInitialTaxProvider]) + useEffect(() => setShowCRMSection(hadInitialCRMProvider), [hadInitialCRMProvider]) + + return ( + +
+ +
+ {translate('text_66423cad72bbad009f2f5689')} + + } + > +
+
+ + {translate('text_66423dbab233e60111c49461')} + + +
+ {showPaymentSection && ( + + )} + {showAccountingSection && ( + + )} + {showTaxSection && ( + + )} + {showCRMSection && ( + + )} + + + {translate('text_65846763e6140b469140e235')} + + } + > + {({ closePopper }) => ( + + + + + + + + + )} + + + {!!formikProps.values.providerCustomer?.syncWithProvider && + (formikProps.values.paymentProvider === ProviderTypeEnum.Gocardless || + formikProps.values.paymentProvider === ProviderTypeEnum.Adyen) && ( + + {formikProps.values.paymentProvider === ProviderTypeEnum.Gocardless + ? translate('text_635bdbda84c98758f9bba8ae') + : translate('text_645d0728ea0a5a7bbf76d5c9')} + + )} +
+ + ) +} + +ExternalAppsAccordion.displayName = 'ExternalAppsAccordion' diff --git a/src/components/customers/addDrawer/ExternalAppsAccordion/utils.ts b/src/components/customers/addDrawer/ExternalAppsAccordion/utils.ts new file mode 100644 index 000000000..33bb13f54 --- /dev/null +++ b/src/components/customers/addDrawer/ExternalAppsAccordion/utils.ts @@ -0,0 +1,88 @@ +import { FormikProps } from 'formik' + +import { + AnrokIntegration, + CreateCustomerInput, + GetAccountingIntegrationsForExternalAppsAccordionQuery, + GetCrmIntegrationsForExternalAppsAccordionQuery, + GetTaxIntegrationsForExternalAppsAccordionQuery, + HubspotIntegration, + IntegrationTypeEnum, + NetsuiteIntegration, + SalesforceIntegration, + UpdateCustomerInput, + XeroIntegration, +} from '~/generated/graphql' + +type SupportedIntegration = + | NetsuiteIntegration + | XeroIntegration + | AnrokIntegration + | HubspotIntegration + | SalesforceIntegration + +const integrationTypeToTypename: Partial> = { + // Account integrations + [IntegrationTypeEnum.Netsuite]: 'NetsuiteIntegration', + [IntegrationTypeEnum.Xero]: 'XeroIntegration', + // Tax integrations + [IntegrationTypeEnum.Anrok]: 'AnrokIntegration', + // CRM integrations + [IntegrationTypeEnum.Hubspot]: 'HubspotIntegration', + [IntegrationTypeEnum.Salesforce]: 'SalesforceIntegration', +} + +export const getIntegration = ({ + integrationType, + formikProps, + allIntegrationsData, +}: { + integrationType: IntegrationTypeEnum + formikProps: FormikProps + allIntegrationsData?: + | GetAccountingIntegrationsForExternalAppsAccordionQuery + | GetTaxIntegrationsForExternalAppsAccordionQuery + | GetCrmIntegrationsForExternalAppsAccordionQuery +}) => { + // Check if the customer already has an integration of the same type + const hadInitialIntegrationCustomer = !!formikProps.initialValues.integrationCustomers?.find( + (i) => i.integrationType === integrationType, + ) + + // Get the selected integration and its index in the integrationCustomers array + const selectedIntegrationIndex = + formikProps.values.integrationCustomers?.findIndex( + (i) => i.integrationType === integrationType, + ) || 0 + const selectedIntegration = formikProps.values.integrationCustomers?.[selectedIntegrationIndex] + const integrationPointerInIntegrationCustomer = `integrationCustomers.${selectedIntegrationIndex}` + + // Get all integrations of the same type + const allIntegrations = allIntegrationsData?.integrations?.collection.filter( + (i) => i.__typename === integrationTypeToTypename[integrationType], + ) as T[] | undefined + + // Get the selected integration settings + const selectedIntegrationSettings = allIntegrations?.find( + (i) => i.code === selectedIntegration?.integrationCode, + ) as T + + return { + hadInitialIntegrationCustomer, + selectedIntegration, + allIntegrations, + selectedIntegrationSettings, + integrationPointerInIntegrationCustomer, + } +} + +export const scrollToIntegration = (selector: string) => { + return setTimeout(() => { + const element = document.querySelector(selector) as HTMLElement + + if (!element) return + + element.scrollIntoView({ behavior: 'smooth', block: 'center' }) + element.click() + }, 1) +} diff --git a/src/generated/graphql.tsx b/src/generated/graphql.tsx index 2ddb542ec..f9b7ff31f 100644 --- a/src/generated/graphql.tsx +++ b/src/generated/graphql.tsx @@ -6774,29 +6774,43 @@ export type CreateCustomerAppliedTaxMutationVariables = Exact<{ export type CreateCustomerAppliedTaxMutation = { __typename?: 'Mutation', updateCustomer?: { __typename?: 'Customer', id: string, taxes?: Array<{ __typename?: 'Tax', id: string, name: string, code: string, rate: number, autoGenerated: boolean }> | null } | null }; -export type CustomerForExternalAppsAccordionFragment = { __typename?: 'Customer', id: string, customerType?: CustomerTypeEnum | null, netsuiteCustomer?: { __typename?: 'NetsuiteCustomer', externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, subsidiaryId?: string | null, syncWithProvider?: boolean | null } | null, anrokCustomer?: { __typename?: 'AnrokCustomer', externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, xeroCustomer?: { __typename?: 'XeroCustomer', externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, hubspotCustomer?: { __typename?: 'HubspotCustomer', externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, salesforceCustomer?: { __typename?: 'SalesforceCustomer', externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null }; - -export type PaymentProvidersListForCustomerCreateEditExternalAppsAccordionQueryVariables = Exact<{ +export type GetAccountingIntegrationsForExternalAppsAccordionQueryVariables = Exact<{ limit?: InputMaybe; + page?: InputMaybe; }>; -export type PaymentProvidersListForCustomerCreateEditExternalAppsAccordionQuery = { __typename?: 'Query', paymentProviders?: { __typename?: 'PaymentProviderCollection', collection: Array<{ __typename: 'AdyenProvider', id: string, name: string, code: string } | { __typename: 'GocardlessProvider', id: string, name: string, code: string } | { __typename: 'StripeProvider', id: string, name: string, code: string }> } | null }; +export type GetAccountingIntegrationsForExternalAppsAccordionQuery = { __typename?: 'Query', integrations?: { __typename?: 'IntegrationCollection', collection: Array<{ __typename?: 'AnrokIntegration' } | { __typename?: 'HubspotIntegration' } | { __typename: 'NetsuiteIntegration', id: string, code: string, name: string } | { __typename?: 'OktaIntegration' } | { __typename?: 'SalesforceIntegration' } | { __typename: 'XeroIntegration', id: string, code: string, name: string }> } | null }; + +export type SubsidiariesListForExternalAppsAccordionQueryVariables = Exact<{ + integrationId?: InputMaybe; +}>; -export type AccountingIntegrationsListForCustomerEditExternalAppsAccordionQueryVariables = Exact<{ + +export type SubsidiariesListForExternalAppsAccordionQuery = { __typename?: 'Query', integrationSubsidiaries?: { __typename?: 'SubsidiaryCollection', collection: Array<{ __typename?: 'Subsidiary', externalId: string, externalName?: string | null }> } | null }; + +export type GetCrmIntegrationsForExternalAppsAccordionQueryVariables = Exact<{ limit?: InputMaybe; page?: InputMaybe; }>; -export type AccountingIntegrationsListForCustomerEditExternalAppsAccordionQuery = { __typename?: 'Query', integrations?: { __typename?: 'IntegrationCollection', collection: Array<{ __typename: 'AnrokIntegration', id: string, code: string, name: string } | { __typename: 'HubspotIntegration', id: string, code: string, name: string, defaultTargetedObject: HubspotTargetedObjectsEnum } | { __typename: 'NetsuiteIntegration', id: string, code: string, name: string } | { __typename?: 'OktaIntegration' } | { __typename: 'SalesforceIntegration', id: string, code: string, name: string } | { __typename: 'XeroIntegration', id: string, code: string, name: string }> } | null }; +export type GetCrmIntegrationsForExternalAppsAccordionQuery = { __typename?: 'Query', integrations?: { __typename?: 'IntegrationCollection', collection: Array<{ __typename?: 'AnrokIntegration' } | { __typename: 'HubspotIntegration', id: string, code: string, name: string, defaultTargetedObject: HubspotTargetedObjectsEnum } | { __typename?: 'NetsuiteIntegration' } | { __typename?: 'OktaIntegration' } | { __typename: 'SalesforceIntegration', id: string, code: string, name: string } | { __typename?: 'XeroIntegration' }> } | null }; -export type SubsidiariesListForCustomerCreateEditExternalAppsAccordionQueryVariables = Exact<{ - integrationId?: InputMaybe; +export type PaymentProvidersListForCustomerCreateEditExternalAppsAccordionQueryVariables = Exact<{ + limit?: InputMaybe; +}>; + + +export type PaymentProvidersListForCustomerCreateEditExternalAppsAccordionQuery = { __typename?: 'Query', paymentProviders?: { __typename?: 'PaymentProviderCollection', collection: Array<{ __typename: 'AdyenProvider', id: string, name: string, code: string } | { __typename: 'GocardlessProvider', id: string, name: string, code: string } | { __typename: 'StripeProvider', id: string, name: string, code: string }> } | null }; + +export type GetTaxIntegrationsForExternalAppsAccordionQueryVariables = Exact<{ + limit?: InputMaybe; + page?: InputMaybe; }>; -export type SubsidiariesListForCustomerCreateEditExternalAppsAccordionQuery = { __typename?: 'Query', integrationSubsidiaries?: { __typename?: 'SubsidiaryCollection', collection: Array<{ __typename?: 'Subsidiary', externalId: string, externalName?: string | null }> } | null }; +export type GetTaxIntegrationsForExternalAppsAccordionQuery = { __typename?: 'Query', integrations?: { __typename?: 'IntegrationCollection', collection: Array<{ __typename: 'AnrokIntegration', id: string, code: string, name: string } | { __typename?: 'HubspotIntegration' } | { __typename?: 'NetsuiteIntegration' } | { __typename?: 'OktaIntegration' } | { __typename?: 'SalesforceIntegration' } | { __typename?: 'XeroIntegration' }> } | null }; export type CreditNoteForVoidCreditNoteDialogFragment = { __typename?: 'CreditNote', id: string, totalAmountCents: any, currency: CurrencyEnum }; @@ -8043,14 +8057,14 @@ export type CreateSubscriptionMutationVariables = Exact<{ }>; -export type CreateSubscriptionMutation = { __typename?: 'Mutation', createSubscription?: { __typename?: 'Subscription', id: string, customer: { __typename?: 'Customer', id: string, activeSubscriptionsCount: number, customerType?: CustomerTypeEnum | null, name?: string | null, displayName: string, firstname?: string | null, lastname?: string | null, externalId: string, hasActiveWallet: boolean, currency?: CurrencyEnum | null, hasCreditNotes: boolean, creditNotesCreditsAvailableCount: number, creditNotesBalanceAmountCents: any, applicableTimezone: TimezoneEnum, hasOverdueInvoices: boolean, addressLine1?: string | null, addressLine2?: string | null, canEditAttributes: boolean, city?: string | null, country?: CountryCode | null, email?: string | null, externalSalesforceId?: string | null, legalName?: string | null, legalNumber?: string | null, taxIdentificationNumber?: string | null, paymentProvider?: ProviderTypeEnum | null, phone?: string | null, state?: string | null, timezone?: TimezoneEnum | null, zipcode?: string | null, url?: string | null, paymentProviderCode?: string | null, shippingAddress?: { __typename?: 'CustomerAddress', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, country?: CountryCode | null, state?: string | null, zipcode?: string | null } | null, providerCustomer?: { __typename?: 'ProviderCustomer', id: string, providerCustomerId?: string | null, syncWithProvider?: boolean | null, providerPaymentMethods?: Array | null } | null, netsuiteCustomer?: { __typename: 'NetsuiteCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, subsidiaryId?: string | null, syncWithProvider?: boolean | null } | null, anrokCustomer?: { __typename: 'AnrokCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, xeroCustomer?: { __typename: 'XeroCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, hubspotCustomer?: { __typename: 'HubspotCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, targetedObject?: HubspotTargetedObjectsEnum | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, salesforceCustomer?: { __typename: 'SalesforceCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, metadata?: Array<{ __typename?: 'CustomerMetadata', id: string, key: string, value: string, displayInInvoice: boolean }> | null } } | null }; +export type CreateSubscriptionMutation = { __typename?: 'Mutation', createSubscription?: { __typename?: 'Subscription', id: string, customer: { __typename?: 'Customer', id: string, activeSubscriptionsCount: number, customerType?: CustomerTypeEnum | null, name?: string | null, displayName: string, firstname?: string | null, lastname?: string | null, externalId: string, hasActiveWallet: boolean, currency?: CurrencyEnum | null, hasCreditNotes: boolean, creditNotesCreditsAvailableCount: number, creditNotesBalanceAmountCents: any, applicableTimezone: TimezoneEnum, hasOverdueInvoices: boolean, addressLine1?: string | null, addressLine2?: string | null, canEditAttributes: boolean, city?: string | null, country?: CountryCode | null, email?: string | null, externalSalesforceId?: string | null, legalName?: string | null, legalNumber?: string | null, taxIdentificationNumber?: string | null, phone?: string | null, state?: string | null, timezone?: TimezoneEnum | null, zipcode?: string | null, url?: string | null, paymentProvider?: ProviderTypeEnum | null, paymentProviderCode?: string | null, shippingAddress?: { __typename?: 'CustomerAddress', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, country?: CountryCode | null, state?: string | null, zipcode?: string | null } | null, metadata?: Array<{ __typename?: 'CustomerMetadata', id: string, key: string, value: string, displayInInvoice: boolean }> | null, anrokCustomer?: { __typename: 'AnrokCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, netsuiteCustomer?: { __typename: 'NetsuiteCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, subsidiaryId?: string | null, syncWithProvider?: boolean | null } | null, providerCustomer?: { __typename?: 'ProviderCustomer', id: string, providerCustomerId?: string | null, providerPaymentMethods?: Array | null, syncWithProvider?: boolean | null } | null, xeroCustomer?: { __typename: 'XeroCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, hubspotCustomer?: { __typename: 'HubspotCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, targetedObject?: HubspotTargetedObjectsEnum | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, salesforceCustomer?: { __typename: 'SalesforceCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null } } | null }; export type UpdateSubscriptionMutationVariables = Exact<{ input: UpdateSubscriptionInput; }>; -export type UpdateSubscriptionMutation = { __typename?: 'Mutation', updateSubscription?: { __typename?: 'Subscription', id: string, customer: { __typename?: 'Customer', id: string, activeSubscriptionsCount: number, customerType?: CustomerTypeEnum | null, name?: string | null, displayName: string, firstname?: string | null, lastname?: string | null, externalId: string, hasActiveWallet: boolean, currency?: CurrencyEnum | null, hasCreditNotes: boolean, creditNotesCreditsAvailableCount: number, creditNotesBalanceAmountCents: any, applicableTimezone: TimezoneEnum, hasOverdueInvoices: boolean, addressLine1?: string | null, addressLine2?: string | null, canEditAttributes: boolean, city?: string | null, country?: CountryCode | null, email?: string | null, externalSalesforceId?: string | null, legalName?: string | null, legalNumber?: string | null, taxIdentificationNumber?: string | null, paymentProvider?: ProviderTypeEnum | null, phone?: string | null, state?: string | null, timezone?: TimezoneEnum | null, zipcode?: string | null, url?: string | null, paymentProviderCode?: string | null, shippingAddress?: { __typename?: 'CustomerAddress', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, country?: CountryCode | null, state?: string | null, zipcode?: string | null } | null, providerCustomer?: { __typename?: 'ProviderCustomer', id: string, providerCustomerId?: string | null, syncWithProvider?: boolean | null, providerPaymentMethods?: Array | null } | null, netsuiteCustomer?: { __typename: 'NetsuiteCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, subsidiaryId?: string | null, syncWithProvider?: boolean | null } | null, anrokCustomer?: { __typename: 'AnrokCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, xeroCustomer?: { __typename: 'XeroCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, hubspotCustomer?: { __typename: 'HubspotCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, targetedObject?: HubspotTargetedObjectsEnum | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, salesforceCustomer?: { __typename: 'SalesforceCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, metadata?: Array<{ __typename?: 'CustomerMetadata', id: string, key: string, value: string, displayInInvoice: boolean }> | null }, plan: { __typename?: 'Plan', id: string } } | null }; +export type UpdateSubscriptionMutation = { __typename?: 'Mutation', updateSubscription?: { __typename?: 'Subscription', id: string, customer: { __typename?: 'Customer', id: string, activeSubscriptionsCount: number, customerType?: CustomerTypeEnum | null, name?: string | null, displayName: string, firstname?: string | null, lastname?: string | null, externalId: string, hasActiveWallet: boolean, currency?: CurrencyEnum | null, hasCreditNotes: boolean, creditNotesCreditsAvailableCount: number, creditNotesBalanceAmountCents: any, applicableTimezone: TimezoneEnum, hasOverdueInvoices: boolean, addressLine1?: string | null, addressLine2?: string | null, canEditAttributes: boolean, city?: string | null, country?: CountryCode | null, email?: string | null, externalSalesforceId?: string | null, legalName?: string | null, legalNumber?: string | null, taxIdentificationNumber?: string | null, phone?: string | null, state?: string | null, timezone?: TimezoneEnum | null, zipcode?: string | null, url?: string | null, paymentProvider?: ProviderTypeEnum | null, paymentProviderCode?: string | null, shippingAddress?: { __typename?: 'CustomerAddress', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, country?: CountryCode | null, state?: string | null, zipcode?: string | null } | null, metadata?: Array<{ __typename?: 'CustomerMetadata', id: string, key: string, value: string, displayInInvoice: boolean }> | null, anrokCustomer?: { __typename: 'AnrokCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, netsuiteCustomer?: { __typename: 'NetsuiteCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, subsidiaryId?: string | null, syncWithProvider?: boolean | null } | null, providerCustomer?: { __typename?: 'ProviderCustomer', id: string, providerCustomerId?: string | null, providerPaymentMethods?: Array | null, syncWithProvider?: boolean | null } | null, xeroCustomer?: { __typename: 'XeroCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, hubspotCustomer?: { __typename: 'HubspotCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, targetedObject?: HubspotTargetedObjectsEnum | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, salesforceCustomer?: { __typename: 'SalesforceCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null }, plan: { __typename?: 'Plan', id: string } } | null }; export type GetSinglePlanQueryVariables = Exact<{ id: Scalars['ID']['input']; @@ -8160,21 +8174,23 @@ export type UpdateCouponMutationVariables = Exact<{ export type UpdateCouponMutation = { __typename?: 'Mutation', updateCoupon?: { __typename?: 'Coupon', id: string, name: string, customersCount: number, status: CouponStatusEnum, amountCurrency?: CurrencyEnum | null, amountCents?: any | null, appliedCouponsCount: number, expiration: CouponExpiration, expirationAt?: any | null, couponType: CouponTypeEnum, percentageRate?: number | null, frequency: CouponFrequency, frequencyDuration?: number | null } | null }; -export type AddCustomerDrawerFragment = { __typename?: 'Customer', id: string, addressLine1?: string | null, addressLine2?: string | null, applicableTimezone: TimezoneEnum, canEditAttributes: boolean, city?: string | null, country?: CountryCode | null, currency?: CurrencyEnum | null, email?: string | null, externalId: string, externalSalesforceId?: string | null, legalName?: string | null, legalNumber?: string | null, taxIdentificationNumber?: string | null, customerType?: CustomerTypeEnum | null, name?: string | null, firstname?: string | null, lastname?: string | null, paymentProvider?: ProviderTypeEnum | null, phone?: string | null, state?: string | null, timezone?: TimezoneEnum | null, zipcode?: string | null, url?: string | null, paymentProviderCode?: string | null, shippingAddress?: { __typename?: 'CustomerAddress', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, country?: CountryCode | null, state?: string | null, zipcode?: string | null } | null, providerCustomer?: { __typename?: 'ProviderCustomer', id: string, providerCustomerId?: string | null, syncWithProvider?: boolean | null, providerPaymentMethods?: Array | null } | null, netsuiteCustomer?: { __typename: 'NetsuiteCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, subsidiaryId?: string | null, syncWithProvider?: boolean | null } | null, anrokCustomer?: { __typename: 'AnrokCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, xeroCustomer?: { __typename: 'XeroCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, hubspotCustomer?: { __typename: 'HubspotCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, salesforceCustomer?: { __typename: 'SalesforceCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, metadata?: Array<{ __typename?: 'CustomerMetadata', id: string, key: string, value: string, displayInInvoice: boolean }> | null }; +export type CustomerForExternalAppsAccordionFragment = { __typename?: 'Customer', id: string, customerType?: CustomerTypeEnum | null, currency?: CurrencyEnum | null, paymentProvider?: ProviderTypeEnum | null, paymentProviderCode?: string | null, netsuiteCustomer?: { __typename: 'NetsuiteCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, subsidiaryId?: string | null, syncWithProvider?: boolean | null } | null, anrokCustomer?: { __typename: 'AnrokCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, xeroCustomer?: { __typename: 'XeroCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, hubspotCustomer?: { __typename: 'HubspotCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, salesforceCustomer?: { __typename: 'SalesforceCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, providerCustomer?: { __typename?: 'ProviderCustomer', id: string, providerCustomerId?: string | null, syncWithProvider?: boolean | null, providerPaymentMethods?: Array | null } | null }; + +export type AddCustomerDrawerFragment = { __typename?: 'Customer', id: string, addressLine1?: string | null, addressLine2?: string | null, applicableTimezone: TimezoneEnum, canEditAttributes: boolean, city?: string | null, country?: CountryCode | null, currency?: CurrencyEnum | null, email?: string | null, externalId: string, externalSalesforceId?: string | null, legalName?: string | null, legalNumber?: string | null, taxIdentificationNumber?: string | null, customerType?: CustomerTypeEnum | null, name?: string | null, firstname?: string | null, lastname?: string | null, phone?: string | null, state?: string | null, timezone?: TimezoneEnum | null, zipcode?: string | null, url?: string | null, paymentProvider?: ProviderTypeEnum | null, paymentProviderCode?: string | null, shippingAddress?: { __typename?: 'CustomerAddress', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, country?: CountryCode | null, state?: string | null, zipcode?: string | null } | null, metadata?: Array<{ __typename?: 'CustomerMetadata', id: string, key: string, value: string, displayInInvoice: boolean }> | null, netsuiteCustomer?: { __typename: 'NetsuiteCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, subsidiaryId?: string | null, syncWithProvider?: boolean | null } | null, anrokCustomer?: { __typename: 'AnrokCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, xeroCustomer?: { __typename: 'XeroCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, hubspotCustomer?: { __typename: 'HubspotCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, salesforceCustomer?: { __typename: 'SalesforceCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, providerCustomer?: { __typename?: 'ProviderCustomer', id: string, providerCustomerId?: string | null, syncWithProvider?: boolean | null, providerPaymentMethods?: Array | null } | null }; export type CreateCustomerMutationVariables = Exact<{ input: CreateCustomerInput; }>; -export type CreateCustomerMutation = { __typename?: 'Mutation', createCustomer?: { __typename?: 'Customer', id: string, addressLine1?: string | null, addressLine2?: string | null, applicableTimezone: TimezoneEnum, canEditAttributes: boolean, city?: string | null, country?: CountryCode | null, currency?: CurrencyEnum | null, email?: string | null, externalId: string, externalSalesforceId?: string | null, legalName?: string | null, legalNumber?: string | null, taxIdentificationNumber?: string | null, customerType?: CustomerTypeEnum | null, name?: string | null, firstname?: string | null, lastname?: string | null, paymentProvider?: ProviderTypeEnum | null, phone?: string | null, state?: string | null, timezone?: TimezoneEnum | null, zipcode?: string | null, url?: string | null, paymentProviderCode?: string | null, displayName: string, createdAt: any, activeSubscriptionsCount: number, shippingAddress?: { __typename?: 'CustomerAddress', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, country?: CountryCode | null, state?: string | null, zipcode?: string | null } | null, providerCustomer?: { __typename?: 'ProviderCustomer', id: string, providerCustomerId?: string | null, syncWithProvider?: boolean | null, providerPaymentMethods?: Array | null } | null, netsuiteCustomer?: { __typename: 'NetsuiteCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, subsidiaryId?: string | null, syncWithProvider?: boolean | null } | null, anrokCustomer?: { __typename: 'AnrokCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, xeroCustomer?: { __typename: 'XeroCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, hubspotCustomer?: { __typename: 'HubspotCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, salesforceCustomer?: { __typename: 'SalesforceCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, metadata?: Array<{ __typename?: 'CustomerMetadata', id: string, key: string, value: string, displayInInvoice: boolean }> | null } | null }; +export type CreateCustomerMutation = { __typename?: 'Mutation', createCustomer?: { __typename?: 'Customer', id: string, addressLine1?: string | null, addressLine2?: string | null, applicableTimezone: TimezoneEnum, canEditAttributes: boolean, city?: string | null, country?: CountryCode | null, currency?: CurrencyEnum | null, email?: string | null, externalId: string, externalSalesforceId?: string | null, legalName?: string | null, legalNumber?: string | null, taxIdentificationNumber?: string | null, customerType?: CustomerTypeEnum | null, name?: string | null, firstname?: string | null, lastname?: string | null, phone?: string | null, state?: string | null, timezone?: TimezoneEnum | null, zipcode?: string | null, url?: string | null, displayName: string, createdAt: any, activeSubscriptionsCount: number, paymentProvider?: ProviderTypeEnum | null, paymentProviderCode?: string | null, shippingAddress?: { __typename?: 'CustomerAddress', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, country?: CountryCode | null, state?: string | null, zipcode?: string | null } | null, metadata?: Array<{ __typename?: 'CustomerMetadata', id: string, key: string, value: string, displayInInvoice: boolean }> | null, netsuiteCustomer?: { __typename: 'NetsuiteCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, subsidiaryId?: string | null, syncWithProvider?: boolean | null } | null, anrokCustomer?: { __typename: 'AnrokCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, xeroCustomer?: { __typename: 'XeroCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, hubspotCustomer?: { __typename: 'HubspotCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, salesforceCustomer?: { __typename: 'SalesforceCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, providerCustomer?: { __typename?: 'ProviderCustomer', id: string, providerCustomerId?: string | null, providerPaymentMethods?: Array | null, syncWithProvider?: boolean | null } | null } | null }; export type UpdateCustomerMutationVariables = Exact<{ input: UpdateCustomerInput; }>; -export type UpdateCustomerMutation = { __typename?: 'Mutation', updateCustomer?: { __typename?: 'Customer', id: string, addressLine1?: string | null, addressLine2?: string | null, applicableTimezone: TimezoneEnum, canEditAttributes: boolean, city?: string | null, country?: CountryCode | null, currency?: CurrencyEnum | null, email?: string | null, externalId: string, externalSalesforceId?: string | null, legalName?: string | null, legalNumber?: string | null, taxIdentificationNumber?: string | null, customerType?: CustomerTypeEnum | null, name?: string | null, firstname?: string | null, lastname?: string | null, paymentProvider?: ProviderTypeEnum | null, phone?: string | null, state?: string | null, timezone?: TimezoneEnum | null, zipcode?: string | null, url?: string | null, paymentProviderCode?: string | null, displayName: string, createdAt: any, activeSubscriptionsCount: number, shippingAddress?: { __typename?: 'CustomerAddress', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, country?: CountryCode | null, state?: string | null, zipcode?: string | null } | null, providerCustomer?: { __typename?: 'ProviderCustomer', id: string, providerCustomerId?: string | null, syncWithProvider?: boolean | null, providerPaymentMethods?: Array | null } | null, netsuiteCustomer?: { __typename: 'NetsuiteCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, subsidiaryId?: string | null, syncWithProvider?: boolean | null } | null, anrokCustomer?: { __typename: 'AnrokCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, xeroCustomer?: { __typename: 'XeroCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, hubspotCustomer?: { __typename: 'HubspotCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, salesforceCustomer?: { __typename: 'SalesforceCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, metadata?: Array<{ __typename?: 'CustomerMetadata', id: string, key: string, value: string, displayInInvoice: boolean }> | null } | null }; +export type UpdateCustomerMutation = { __typename?: 'Mutation', updateCustomer?: { __typename?: 'Customer', id: string, addressLine1?: string | null, addressLine2?: string | null, applicableTimezone: TimezoneEnum, canEditAttributes: boolean, city?: string | null, country?: CountryCode | null, currency?: CurrencyEnum | null, email?: string | null, externalId: string, externalSalesforceId?: string | null, legalName?: string | null, legalNumber?: string | null, taxIdentificationNumber?: string | null, customerType?: CustomerTypeEnum | null, name?: string | null, firstname?: string | null, lastname?: string | null, phone?: string | null, state?: string | null, timezone?: TimezoneEnum | null, zipcode?: string | null, url?: string | null, displayName: string, createdAt: any, activeSubscriptionsCount: number, paymentProvider?: ProviderTypeEnum | null, paymentProviderCode?: string | null, shippingAddress?: { __typename?: 'CustomerAddress', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, country?: CountryCode | null, state?: string | null, zipcode?: string | null } | null, metadata?: Array<{ __typename?: 'CustomerMetadata', id: string, key: string, value: string, displayInInvoice: boolean }> | null, netsuiteCustomer?: { __typename: 'NetsuiteCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, subsidiaryId?: string | null, syncWithProvider?: boolean | null } | null, anrokCustomer?: { __typename: 'AnrokCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, xeroCustomer?: { __typename: 'XeroCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, hubspotCustomer?: { __typename: 'HubspotCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, salesforceCustomer?: { __typename: 'SalesforceCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, providerCustomer?: { __typename?: 'ProviderCustomer', id: string, providerCustomerId?: string | null, providerPaymentMethods?: Array | null, syncWithProvider?: boolean | null } | null } | null }; export type DunningCampaignFormFragment = { __typename?: 'DunningCampaign', name: string, code: string, description?: string | null, daysBetweenAttempts: number, maxAttempts: number, appliedToOrganization: boolean, thresholds: Array<{ __typename?: 'DunningCampaignThreshold', amountCents: any, currency: CurrencyEnum }> }; @@ -8507,14 +8523,14 @@ export type RetryTaxReportingMutationVariables = Exact<{ export type RetryTaxReportingMutation = { __typename?: 'Mutation', retryTaxReporting?: { __typename?: 'CreditNote', id: string } | null }; -export type CustomerDetailsFragment = { __typename?: 'Customer', id: string, customerType?: CustomerTypeEnum | null, name?: string | null, displayName: string, firstname?: string | null, lastname?: string | null, externalId: string, hasActiveWallet: boolean, currency?: CurrencyEnum | null, hasCreditNotes: boolean, creditNotesCreditsAvailableCount: number, creditNotesBalanceAmountCents: any, applicableTimezone: TimezoneEnum, hasOverdueInvoices: boolean, addressLine1?: string | null, addressLine2?: string | null, canEditAttributes: boolean, city?: string | null, country?: CountryCode | null, email?: string | null, externalSalesforceId?: string | null, legalName?: string | null, legalNumber?: string | null, taxIdentificationNumber?: string | null, paymentProvider?: ProviderTypeEnum | null, phone?: string | null, state?: string | null, timezone?: TimezoneEnum | null, zipcode?: string | null, url?: string | null, paymentProviderCode?: string | null, shippingAddress?: { __typename?: 'CustomerAddress', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, country?: CountryCode | null, state?: string | null, zipcode?: string | null } | null, providerCustomer?: { __typename?: 'ProviderCustomer', id: string, providerCustomerId?: string | null, syncWithProvider?: boolean | null, providerPaymentMethods?: Array | null } | null, netsuiteCustomer?: { __typename: 'NetsuiteCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, subsidiaryId?: string | null, syncWithProvider?: boolean | null } | null, anrokCustomer?: { __typename: 'AnrokCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, xeroCustomer?: { __typename: 'XeroCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, hubspotCustomer?: { __typename: 'HubspotCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, targetedObject?: HubspotTargetedObjectsEnum | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, salesforceCustomer?: { __typename: 'SalesforceCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, metadata?: Array<{ __typename?: 'CustomerMetadata', id: string, key: string, value: string, displayInInvoice: boolean }> | null }; +export type CustomerDetailsFragment = { __typename?: 'Customer', id: string, customerType?: CustomerTypeEnum | null, name?: string | null, displayName: string, firstname?: string | null, lastname?: string | null, externalId: string, hasActiveWallet: boolean, currency?: CurrencyEnum | null, hasCreditNotes: boolean, creditNotesCreditsAvailableCount: number, creditNotesBalanceAmountCents: any, applicableTimezone: TimezoneEnum, hasOverdueInvoices: boolean, addressLine1?: string | null, addressLine2?: string | null, canEditAttributes: boolean, city?: string | null, country?: CountryCode | null, email?: string | null, externalSalesforceId?: string | null, legalName?: string | null, legalNumber?: string | null, taxIdentificationNumber?: string | null, phone?: string | null, state?: string | null, timezone?: TimezoneEnum | null, zipcode?: string | null, url?: string | null, paymentProvider?: ProviderTypeEnum | null, paymentProviderCode?: string | null, shippingAddress?: { __typename?: 'CustomerAddress', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, country?: CountryCode | null, state?: string | null, zipcode?: string | null } | null, metadata?: Array<{ __typename?: 'CustomerMetadata', id: string, key: string, value: string, displayInInvoice: boolean }> | null, anrokCustomer?: { __typename: 'AnrokCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, netsuiteCustomer?: { __typename: 'NetsuiteCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, subsidiaryId?: string | null, syncWithProvider?: boolean | null } | null, providerCustomer?: { __typename?: 'ProviderCustomer', id: string, providerCustomerId?: string | null, providerPaymentMethods?: Array | null, syncWithProvider?: boolean | null } | null, xeroCustomer?: { __typename: 'XeroCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, hubspotCustomer?: { __typename: 'HubspotCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, targetedObject?: HubspotTargetedObjectsEnum | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, salesforceCustomer?: { __typename: 'SalesforceCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null }; export type GetCustomerQueryVariables = Exact<{ id: Scalars['ID']['input']; }>; -export type GetCustomerQuery = { __typename?: 'Query', customer?: { __typename?: 'Customer', id: string, customerType?: CustomerTypeEnum | null, name?: string | null, displayName: string, firstname?: string | null, lastname?: string | null, externalId: string, hasActiveWallet: boolean, currency?: CurrencyEnum | null, hasCreditNotes: boolean, creditNotesCreditsAvailableCount: number, creditNotesBalanceAmountCents: any, applicableTimezone: TimezoneEnum, hasOverdueInvoices: boolean, addressLine1?: string | null, addressLine2?: string | null, canEditAttributes: boolean, city?: string | null, country?: CountryCode | null, email?: string | null, externalSalesforceId?: string | null, legalName?: string | null, legalNumber?: string | null, taxIdentificationNumber?: string | null, paymentProvider?: ProviderTypeEnum | null, phone?: string | null, state?: string | null, timezone?: TimezoneEnum | null, zipcode?: string | null, url?: string | null, paymentProviderCode?: string | null, shippingAddress?: { __typename?: 'CustomerAddress', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, country?: CountryCode | null, state?: string | null, zipcode?: string | null } | null, providerCustomer?: { __typename?: 'ProviderCustomer', id: string, providerCustomerId?: string | null, syncWithProvider?: boolean | null, providerPaymentMethods?: Array | null } | null, netsuiteCustomer?: { __typename: 'NetsuiteCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, subsidiaryId?: string | null, syncWithProvider?: boolean | null } | null, anrokCustomer?: { __typename: 'AnrokCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, xeroCustomer?: { __typename: 'XeroCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, hubspotCustomer?: { __typename: 'HubspotCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, targetedObject?: HubspotTargetedObjectsEnum | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, salesforceCustomer?: { __typename: 'SalesforceCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, metadata?: Array<{ __typename?: 'CustomerMetadata', id: string, key: string, value: string, displayInInvoice: boolean }> | null } | null }; +export type GetCustomerQuery = { __typename?: 'Query', customer?: { __typename?: 'Customer', id: string, customerType?: CustomerTypeEnum | null, name?: string | null, displayName: string, firstname?: string | null, lastname?: string | null, externalId: string, hasActiveWallet: boolean, currency?: CurrencyEnum | null, hasCreditNotes: boolean, creditNotesCreditsAvailableCount: number, creditNotesBalanceAmountCents: any, applicableTimezone: TimezoneEnum, hasOverdueInvoices: boolean, addressLine1?: string | null, addressLine2?: string | null, canEditAttributes: boolean, city?: string | null, country?: CountryCode | null, email?: string | null, externalSalesforceId?: string | null, legalName?: string | null, legalNumber?: string | null, taxIdentificationNumber?: string | null, phone?: string | null, state?: string | null, timezone?: TimezoneEnum | null, zipcode?: string | null, url?: string | null, paymentProvider?: ProviderTypeEnum | null, paymentProviderCode?: string | null, shippingAddress?: { __typename?: 'CustomerAddress', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, country?: CountryCode | null, state?: string | null, zipcode?: string | null } | null, metadata?: Array<{ __typename?: 'CustomerMetadata', id: string, key: string, value: string, displayInInvoice: boolean }> | null, anrokCustomer?: { __typename: 'AnrokCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, netsuiteCustomer?: { __typename: 'NetsuiteCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, subsidiaryId?: string | null, syncWithProvider?: boolean | null } | null, providerCustomer?: { __typename?: 'ProviderCustomer', id: string, providerCustomerId?: string | null, providerPaymentMethods?: Array | null, syncWithProvider?: boolean | null } | null, xeroCustomer?: { __typename: 'XeroCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, hubspotCustomer?: { __typename: 'HubspotCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, targetedObject?: HubspotTargetedObjectsEnum | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, salesforceCustomer?: { __typename: 'SalesforceCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null } | null }; export type GenerateCustomerPortalUrlMutationVariables = Exact<{ input: GenerateCustomerPortalUrlInput; @@ -8562,7 +8578,7 @@ export type CreatePaymentRequestMutationVariables = Exact<{ export type CreatePaymentRequestMutation = { __typename?: 'Mutation', createPaymentRequest?: { __typename?: 'PaymentRequest', id: string } | null }; -export type CustomerItemFragment = { __typename?: 'Customer', id: string, name?: string | null, displayName: string, firstname?: string | null, lastname?: string | null, externalId: string, createdAt: any, activeSubscriptionsCount: number, addressLine1?: string | null, addressLine2?: string | null, applicableTimezone: TimezoneEnum, canEditAttributes: boolean, city?: string | null, country?: CountryCode | null, currency?: CurrencyEnum | null, email?: string | null, externalSalesforceId?: string | null, legalName?: string | null, legalNumber?: string | null, taxIdentificationNumber?: string | null, customerType?: CustomerTypeEnum | null, paymentProvider?: ProviderTypeEnum | null, phone?: string | null, state?: string | null, timezone?: TimezoneEnum | null, zipcode?: string | null, url?: string | null, paymentProviderCode?: string | null, shippingAddress?: { __typename?: 'CustomerAddress', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, country?: CountryCode | null, state?: string | null, zipcode?: string | null } | null, providerCustomer?: { __typename?: 'ProviderCustomer', id: string, providerCustomerId?: string | null, syncWithProvider?: boolean | null, providerPaymentMethods?: Array | null } | null, netsuiteCustomer?: { __typename: 'NetsuiteCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, subsidiaryId?: string | null, syncWithProvider?: boolean | null } | null, anrokCustomer?: { __typename: 'AnrokCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, xeroCustomer?: { __typename: 'XeroCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, hubspotCustomer?: { __typename: 'HubspotCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, salesforceCustomer?: { __typename: 'SalesforceCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, metadata?: Array<{ __typename?: 'CustomerMetadata', id: string, key: string, value: string, displayInInvoice: boolean }> | null }; +export type CustomerItemFragment = { __typename?: 'Customer', id: string, name?: string | null, displayName: string, firstname?: string | null, lastname?: string | null, externalId: string, createdAt: any, activeSubscriptionsCount: number, addressLine1?: string | null, addressLine2?: string | null, applicableTimezone: TimezoneEnum, canEditAttributes: boolean, city?: string | null, country?: CountryCode | null, currency?: CurrencyEnum | null, email?: string | null, externalSalesforceId?: string | null, legalName?: string | null, legalNumber?: string | null, taxIdentificationNumber?: string | null, customerType?: CustomerTypeEnum | null, phone?: string | null, state?: string | null, timezone?: TimezoneEnum | null, zipcode?: string | null, url?: string | null, paymentProvider?: ProviderTypeEnum | null, paymentProviderCode?: string | null, shippingAddress?: { __typename?: 'CustomerAddress', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, country?: CountryCode | null, state?: string | null, zipcode?: string | null } | null, metadata?: Array<{ __typename?: 'CustomerMetadata', id: string, key: string, value: string, displayInInvoice: boolean }> | null, netsuiteCustomer?: { __typename: 'NetsuiteCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, subsidiaryId?: string | null, syncWithProvider?: boolean | null } | null, anrokCustomer?: { __typename: 'AnrokCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, xeroCustomer?: { __typename: 'XeroCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, hubspotCustomer?: { __typename: 'HubspotCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, salesforceCustomer?: { __typename: 'SalesforceCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, providerCustomer?: { __typename?: 'ProviderCustomer', id: string, providerCustomerId?: string | null, syncWithProvider?: boolean | null, providerPaymentMethods?: Array | null } | null }; export type CustomersQueryVariables = Exact<{ page?: InputMaybe; @@ -8571,7 +8587,7 @@ export type CustomersQueryVariables = Exact<{ }>; -export type CustomersQuery = { __typename?: 'Query', customers: { __typename?: 'CustomerCollection', metadata: { __typename?: 'CollectionMetadata', currentPage: number, totalPages: number }, collection: Array<{ __typename?: 'Customer', id: string, name?: string | null, displayName: string, firstname?: string | null, lastname?: string | null, externalId: string, createdAt: any, activeSubscriptionsCount: number, addressLine1?: string | null, addressLine2?: string | null, applicableTimezone: TimezoneEnum, canEditAttributes: boolean, city?: string | null, country?: CountryCode | null, currency?: CurrencyEnum | null, email?: string | null, externalSalesforceId?: string | null, legalName?: string | null, legalNumber?: string | null, taxIdentificationNumber?: string | null, customerType?: CustomerTypeEnum | null, paymentProvider?: ProviderTypeEnum | null, phone?: string | null, state?: string | null, timezone?: TimezoneEnum | null, zipcode?: string | null, url?: string | null, paymentProviderCode?: string | null, shippingAddress?: { __typename?: 'CustomerAddress', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, country?: CountryCode | null, state?: string | null, zipcode?: string | null } | null, providerCustomer?: { __typename?: 'ProviderCustomer', id: string, providerCustomerId?: string | null, syncWithProvider?: boolean | null, providerPaymentMethods?: Array | null } | null, netsuiteCustomer?: { __typename: 'NetsuiteCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, subsidiaryId?: string | null, syncWithProvider?: boolean | null } | null, anrokCustomer?: { __typename: 'AnrokCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, xeroCustomer?: { __typename: 'XeroCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, hubspotCustomer?: { __typename: 'HubspotCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, salesforceCustomer?: { __typename: 'SalesforceCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, metadata?: Array<{ __typename?: 'CustomerMetadata', id: string, key: string, value: string, displayInInvoice: boolean }> | null }> } }; +export type CustomersQuery = { __typename?: 'Query', customers: { __typename?: 'CustomerCollection', metadata: { __typename?: 'CollectionMetadata', currentPage: number, totalPages: number }, collection: Array<{ __typename?: 'Customer', id: string, name?: string | null, displayName: string, firstname?: string | null, lastname?: string | null, externalId: string, createdAt: any, activeSubscriptionsCount: number, addressLine1?: string | null, addressLine2?: string | null, applicableTimezone: TimezoneEnum, canEditAttributes: boolean, city?: string | null, country?: CountryCode | null, currency?: CurrencyEnum | null, email?: string | null, externalSalesforceId?: string | null, legalName?: string | null, legalNumber?: string | null, taxIdentificationNumber?: string | null, customerType?: CustomerTypeEnum | null, phone?: string | null, state?: string | null, timezone?: TimezoneEnum | null, zipcode?: string | null, url?: string | null, paymentProvider?: ProviderTypeEnum | null, paymentProviderCode?: string | null, shippingAddress?: { __typename?: 'CustomerAddress', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, country?: CountryCode | null, state?: string | null, zipcode?: string | null } | null, metadata?: Array<{ __typename?: 'CustomerMetadata', id: string, key: string, value: string, displayInInvoice: boolean }> | null, netsuiteCustomer?: { __typename: 'NetsuiteCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, subsidiaryId?: string | null, syncWithProvider?: boolean | null } | null, anrokCustomer?: { __typename: 'AnrokCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, xeroCustomer?: { __typename: 'XeroCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, hubspotCustomer?: { __typename: 'HubspotCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, salesforceCustomer?: { __typename: 'SalesforceCustomer', id: string, integrationId?: string | null, externalCustomerId?: string | null, integrationCode?: string | null, integrationType?: IntegrationTypeEnum | null, syncWithProvider?: boolean | null } | null, providerCustomer?: { __typename?: 'ProviderCustomer', id: string, providerCustomerId?: string | null, syncWithProvider?: boolean | null, providerPaymentMethods?: Array | null } | null }> } }; export type GetinviteQueryVariables = Exact<{ token: Scalars['String']['input']; @@ -11509,7 +11525,13 @@ export const CustomerForExternalAppsAccordionFragmentDoc = gql` fragment CustomerForExternalAppsAccordion on Customer { id customerType + currency + paymentProvider + paymentProviderCode netsuiteCustomer { + __typename + id + integrationId externalCustomerId integrationCode integrationType @@ -11517,29 +11539,47 @@ export const CustomerForExternalAppsAccordionFragmentDoc = gql` syncWithProvider } anrokCustomer { + __typename + id + integrationId externalCustomerId integrationCode integrationType syncWithProvider } xeroCustomer { + __typename + id + integrationId externalCustomerId integrationCode integrationType syncWithProvider } hubspotCustomer { + __typename + id + integrationId externalCustomerId integrationCode integrationType syncWithProvider } salesforceCustomer { + __typename + id + integrationId externalCustomerId integrationCode integrationType syncWithProvider } + providerCustomer { + id + providerCustomerId + syncWithProvider + providerPaymentMethods + } } `; export const AddCustomerDrawerFragmentDoc = gql` @@ -11562,7 +11602,6 @@ export const AddCustomerDrawerFragmentDoc = gql` name firstname lastname - paymentProvider phone state timezone @@ -11576,38 +11615,6 @@ export const AddCustomerDrawerFragmentDoc = gql` zipcode } url - paymentProviderCode - providerCustomer { - id - providerCustomerId - syncWithProvider - providerPaymentMethods - } - netsuiteCustomer { - __typename - id - integrationId - } - anrokCustomer { - __typename - id - integrationId - } - xeroCustomer { - __typename - id - integrationId - } - hubspotCustomer { - __typename - id - integrationId - } - salesforceCustomer { - __typename - id - integrationId - } metadata { id key @@ -14182,27 +14189,21 @@ export function useCreateCustomerAppliedTaxMutation(baseOptions?: Apollo.Mutatio export type CreateCustomerAppliedTaxMutationHookResult = ReturnType; export type CreateCustomerAppliedTaxMutationResult = Apollo.MutationResult; export type CreateCustomerAppliedTaxMutationOptions = Apollo.BaseMutationOptions; -export const PaymentProvidersListForCustomerCreateEditExternalAppsAccordionDocument = gql` - query paymentProvidersListForCustomerCreateEditExternalAppsAccordion($limit: Int) { - paymentProviders(limit: $limit) { +export const GetAccountingIntegrationsForExternalAppsAccordionDocument = gql` + query getAccountingIntegrationsForExternalAppsAccordion($limit: Int, $page: Int) { + integrations(limit: $limit, page: $page) { collection { - ... on StripeProvider { + ... on NetsuiteIntegration { __typename id - name code - } - ... on GocardlessProvider { - __typename - id name - code } - ... on AdyenProvider { + ... on XeroIntegration { __typename id - name code + name } } } @@ -14210,71 +14211,157 @@ export const PaymentProvidersListForCustomerCreateEditExternalAppsAccordionDocum `; /** - * __usePaymentProvidersListForCustomerCreateEditExternalAppsAccordionQuery__ + * __useGetAccountingIntegrationsForExternalAppsAccordionQuery__ * - * To run a query within a React component, call `usePaymentProvidersListForCustomerCreateEditExternalAppsAccordionQuery` and pass it any options that fit your needs. - * When your component renders, `usePaymentProvidersListForCustomerCreateEditExternalAppsAccordionQuery` returns an object from Apollo Client that contains loading, error, and data properties + * To run a query within a React component, call `useGetAccountingIntegrationsForExternalAppsAccordionQuery` and pass it any options that fit your needs. + * When your component renders, `useGetAccountingIntegrationsForExternalAppsAccordionQuery` 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 } = usePaymentProvidersListForCustomerCreateEditExternalAppsAccordionQuery({ + * const { data, loading, error } = useGetAccountingIntegrationsForExternalAppsAccordionQuery({ * variables: { * limit: // value for 'limit' + * page: // value for 'page' * }, * }); */ -export function usePaymentProvidersListForCustomerCreateEditExternalAppsAccordionQuery(baseOptions?: Apollo.QueryHookOptions) { +export function useGetAccountingIntegrationsForExternalAppsAccordionQuery(baseOptions?: Apollo.QueryHookOptions) { const options = {...defaultOptions, ...baseOptions} - return Apollo.useQuery(PaymentProvidersListForCustomerCreateEditExternalAppsAccordionDocument, options); + return Apollo.useQuery(GetAccountingIntegrationsForExternalAppsAccordionDocument, options); } -export function usePaymentProvidersListForCustomerCreateEditExternalAppsAccordionLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { +export function useGetAccountingIntegrationsForExternalAppsAccordionLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { const options = {...defaultOptions, ...baseOptions} - return Apollo.useLazyQuery(PaymentProvidersListForCustomerCreateEditExternalAppsAccordionDocument, options); + return Apollo.useLazyQuery(GetAccountingIntegrationsForExternalAppsAccordionDocument, options); } -export function usePaymentProvidersListForCustomerCreateEditExternalAppsAccordionSuspenseQuery(baseOptions?: Apollo.SkipToken | Apollo.SuspenseQueryHookOptions) { +export function useGetAccountingIntegrationsForExternalAppsAccordionSuspenseQuery(baseOptions?: Apollo.SkipToken | Apollo.SuspenseQueryHookOptions) { const options = baseOptions === Apollo.skipToken ? baseOptions : {...defaultOptions, ...baseOptions} - return Apollo.useSuspenseQuery(PaymentProvidersListForCustomerCreateEditExternalAppsAccordionDocument, options); + return Apollo.useSuspenseQuery(GetAccountingIntegrationsForExternalAppsAccordionDocument, options); + } +export type GetAccountingIntegrationsForExternalAppsAccordionQueryHookResult = ReturnType; +export type GetAccountingIntegrationsForExternalAppsAccordionLazyQueryHookResult = ReturnType; +export type GetAccountingIntegrationsForExternalAppsAccordionSuspenseQueryHookResult = ReturnType; +export type GetAccountingIntegrationsForExternalAppsAccordionQueryResult = Apollo.QueryResult; +export const SubsidiariesListForExternalAppsAccordionDocument = gql` + query subsidiariesListForExternalAppsAccordion($integrationId: ID) { + integrationSubsidiaries(integrationId: $integrationId) { + collection { + externalId + externalName + } + } +} + `; + +/** + * __useSubsidiariesListForExternalAppsAccordionQuery__ + * + * To run a query within a React component, call `useSubsidiariesListForExternalAppsAccordionQuery` and pass it any options that fit your needs. + * When your component renders, `useSubsidiariesListForExternalAppsAccordionQuery` 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 } = useSubsidiariesListForExternalAppsAccordionQuery({ + * variables: { + * integrationId: // value for 'integrationId' + * }, + * }); + */ +export function useSubsidiariesListForExternalAppsAccordionQuery(baseOptions?: Apollo.QueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(SubsidiariesListForExternalAppsAccordionDocument, options); + } +export function useSubsidiariesListForExternalAppsAccordionLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(SubsidiariesListForExternalAppsAccordionDocument, options); } -export type PaymentProvidersListForCustomerCreateEditExternalAppsAccordionQueryHookResult = ReturnType; -export type PaymentProvidersListForCustomerCreateEditExternalAppsAccordionLazyQueryHookResult = ReturnType; -export type PaymentProvidersListForCustomerCreateEditExternalAppsAccordionSuspenseQueryHookResult = ReturnType; -export type PaymentProvidersListForCustomerCreateEditExternalAppsAccordionQueryResult = Apollo.QueryResult; -export const AccountingIntegrationsListForCustomerEditExternalAppsAccordionDocument = gql` - query accountingIntegrationsListForCustomerEditExternalAppsAccordion($limit: Int, $page: Int) { +export function useSubsidiariesListForExternalAppsAccordionSuspenseQuery(baseOptions?: Apollo.SkipToken | Apollo.SuspenseQueryHookOptions) { + const options = baseOptions === Apollo.skipToken ? baseOptions : {...defaultOptions, ...baseOptions} + return Apollo.useSuspenseQuery(SubsidiariesListForExternalAppsAccordionDocument, options); + } +export type SubsidiariesListForExternalAppsAccordionQueryHookResult = ReturnType; +export type SubsidiariesListForExternalAppsAccordionLazyQueryHookResult = ReturnType; +export type SubsidiariesListForExternalAppsAccordionSuspenseQueryHookResult = ReturnType; +export type SubsidiariesListForExternalAppsAccordionQueryResult = Apollo.QueryResult; +export const GetCrmIntegrationsForExternalAppsAccordionDocument = gql` + query getCrmIntegrationsForExternalAppsAccordion($limit: Int, $page: Int) { integrations(limit: $limit, page: $page) { collection { - ... on NetsuiteIntegration { + ... on HubspotIntegration { __typename id code name + defaultTargetedObject } - ... on AnrokIntegration { + ... on SalesforceIntegration { __typename id code name } - ... on XeroIntegration { + } + } +} + `; + +/** + * __useGetCrmIntegrationsForExternalAppsAccordionQuery__ + * + * To run a query within a React component, call `useGetCrmIntegrationsForExternalAppsAccordionQuery` and pass it any options that fit your needs. + * When your component renders, `useGetCrmIntegrationsForExternalAppsAccordionQuery` 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 } = useGetCrmIntegrationsForExternalAppsAccordionQuery({ + * variables: { + * limit: // value for 'limit' + * page: // value for 'page' + * }, + * }); + */ +export function useGetCrmIntegrationsForExternalAppsAccordionQuery(baseOptions?: Apollo.QueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(GetCrmIntegrationsForExternalAppsAccordionDocument, options); + } +export function useGetCrmIntegrationsForExternalAppsAccordionLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(GetCrmIntegrationsForExternalAppsAccordionDocument, options); + } +export function useGetCrmIntegrationsForExternalAppsAccordionSuspenseQuery(baseOptions?: Apollo.SkipToken | Apollo.SuspenseQueryHookOptions) { + const options = baseOptions === Apollo.skipToken ? baseOptions : {...defaultOptions, ...baseOptions} + return Apollo.useSuspenseQuery(GetCrmIntegrationsForExternalAppsAccordionDocument, options); + } +export type GetCrmIntegrationsForExternalAppsAccordionQueryHookResult = ReturnType; +export type GetCrmIntegrationsForExternalAppsAccordionLazyQueryHookResult = ReturnType; +export type GetCrmIntegrationsForExternalAppsAccordionSuspenseQueryHookResult = ReturnType; +export type GetCrmIntegrationsForExternalAppsAccordionQueryResult = Apollo.QueryResult; +export const PaymentProvidersListForCustomerCreateEditExternalAppsAccordionDocument = gql` + query paymentProvidersListForCustomerCreateEditExternalAppsAccordion($limit: Int) { + paymentProviders(limit: $limit) { + collection { + ... on StripeProvider { __typename id - code name + code } - ... on HubspotIntegration { + ... on GocardlessProvider { __typename id - code name - defaultTargetedObject + code } - ... on SalesforceIntegration { + ... on AdyenProvider { __typename id - code name + code } } } @@ -14282,81 +14369,85 @@ export const AccountingIntegrationsListForCustomerEditExternalAppsAccordionDocum `; /** - * __useAccountingIntegrationsListForCustomerEditExternalAppsAccordionQuery__ + * __usePaymentProvidersListForCustomerCreateEditExternalAppsAccordionQuery__ * - * To run a query within a React component, call `useAccountingIntegrationsListForCustomerEditExternalAppsAccordionQuery` and pass it any options that fit your needs. - * When your component renders, `useAccountingIntegrationsListForCustomerEditExternalAppsAccordionQuery` returns an object from Apollo Client that contains loading, error, and data properties + * To run a query within a React component, call `usePaymentProvidersListForCustomerCreateEditExternalAppsAccordionQuery` and pass it any options that fit your needs. + * When your component renders, `usePaymentProvidersListForCustomerCreateEditExternalAppsAccordionQuery` 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 } = useAccountingIntegrationsListForCustomerEditExternalAppsAccordionQuery({ + * const { data, loading, error } = usePaymentProvidersListForCustomerCreateEditExternalAppsAccordionQuery({ * variables: { * limit: // value for 'limit' - * page: // value for 'page' * }, * }); */ -export function useAccountingIntegrationsListForCustomerEditExternalAppsAccordionQuery(baseOptions?: Apollo.QueryHookOptions) { +export function usePaymentProvidersListForCustomerCreateEditExternalAppsAccordionQuery(baseOptions?: Apollo.QueryHookOptions) { const options = {...defaultOptions, ...baseOptions} - return Apollo.useQuery(AccountingIntegrationsListForCustomerEditExternalAppsAccordionDocument, options); + return Apollo.useQuery(PaymentProvidersListForCustomerCreateEditExternalAppsAccordionDocument, options); } -export function useAccountingIntegrationsListForCustomerEditExternalAppsAccordionLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { +export function usePaymentProvidersListForCustomerCreateEditExternalAppsAccordionLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { const options = {...defaultOptions, ...baseOptions} - return Apollo.useLazyQuery(AccountingIntegrationsListForCustomerEditExternalAppsAccordionDocument, options); + return Apollo.useLazyQuery(PaymentProvidersListForCustomerCreateEditExternalAppsAccordionDocument, options); } -export function useAccountingIntegrationsListForCustomerEditExternalAppsAccordionSuspenseQuery(baseOptions?: Apollo.SkipToken | Apollo.SuspenseQueryHookOptions) { +export function usePaymentProvidersListForCustomerCreateEditExternalAppsAccordionSuspenseQuery(baseOptions?: Apollo.SkipToken | Apollo.SuspenseQueryHookOptions) { const options = baseOptions === Apollo.skipToken ? baseOptions : {...defaultOptions, ...baseOptions} - return Apollo.useSuspenseQuery(AccountingIntegrationsListForCustomerEditExternalAppsAccordionDocument, options); - } -export type AccountingIntegrationsListForCustomerEditExternalAppsAccordionQueryHookResult = ReturnType; -export type AccountingIntegrationsListForCustomerEditExternalAppsAccordionLazyQueryHookResult = ReturnType; -export type AccountingIntegrationsListForCustomerEditExternalAppsAccordionSuspenseQueryHookResult = ReturnType; -export type AccountingIntegrationsListForCustomerEditExternalAppsAccordionQueryResult = Apollo.QueryResult; -export const SubsidiariesListForCustomerCreateEditExternalAppsAccordionDocument = gql` - query subsidiariesListForCustomerCreateEditExternalAppsAccordion($integrationId: ID) { - integrationSubsidiaries(integrationId: $integrationId) { + return Apollo.useSuspenseQuery(PaymentProvidersListForCustomerCreateEditExternalAppsAccordionDocument, options); + } +export type PaymentProvidersListForCustomerCreateEditExternalAppsAccordionQueryHookResult = ReturnType; +export type PaymentProvidersListForCustomerCreateEditExternalAppsAccordionLazyQueryHookResult = ReturnType; +export type PaymentProvidersListForCustomerCreateEditExternalAppsAccordionSuspenseQueryHookResult = ReturnType; +export type PaymentProvidersListForCustomerCreateEditExternalAppsAccordionQueryResult = Apollo.QueryResult; +export const GetTaxIntegrationsForExternalAppsAccordionDocument = gql` + query getTaxIntegrationsForExternalAppsAccordion($limit: Int, $page: Int) { + integrations(limit: $limit, page: $page) { collection { - externalId - externalName + ... on AnrokIntegration { + __typename + id + code + name + } } } } `; /** - * __useSubsidiariesListForCustomerCreateEditExternalAppsAccordionQuery__ + * __useGetTaxIntegrationsForExternalAppsAccordionQuery__ * - * 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 + * To run a query within a React component, call `useGetTaxIntegrationsForExternalAppsAccordionQuery` and pass it any options that fit your needs. + * When your component renders, `useGetTaxIntegrationsForExternalAppsAccordionQuery` 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({ + * const { data, loading, error } = useGetTaxIntegrationsForExternalAppsAccordionQuery({ * variables: { - * integrationId: // value for 'integrationId' + * limit: // value for 'limit' + * page: // value for 'page' * }, * }); */ -export function useSubsidiariesListForCustomerCreateEditExternalAppsAccordionQuery(baseOptions?: Apollo.QueryHookOptions) { +export function useGetTaxIntegrationsForExternalAppsAccordionQuery(baseOptions?: Apollo.QueryHookOptions) { const options = {...defaultOptions, ...baseOptions} - return Apollo.useQuery(SubsidiariesListForCustomerCreateEditExternalAppsAccordionDocument, options); + return Apollo.useQuery(GetTaxIntegrationsForExternalAppsAccordionDocument, options); } -export function useSubsidiariesListForCustomerCreateEditExternalAppsAccordionLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { +export function useGetTaxIntegrationsForExternalAppsAccordionLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { const options = {...defaultOptions, ...baseOptions} - return Apollo.useLazyQuery(SubsidiariesListForCustomerCreateEditExternalAppsAccordionDocument, options); + return Apollo.useLazyQuery(GetTaxIntegrationsForExternalAppsAccordionDocument, options); } -export function useSubsidiariesListForCustomerCreateEditExternalAppsAccordionSuspenseQuery(baseOptions?: Apollo.SkipToken | Apollo.SuspenseQueryHookOptions) { +export function useGetTaxIntegrationsForExternalAppsAccordionSuspenseQuery(baseOptions?: Apollo.SkipToken | Apollo.SuspenseQueryHookOptions) { const options = baseOptions === Apollo.skipToken ? baseOptions : {...defaultOptions, ...baseOptions} - return Apollo.useSuspenseQuery(SubsidiariesListForCustomerCreateEditExternalAppsAccordionDocument, options); + return Apollo.useSuspenseQuery(GetTaxIntegrationsForExternalAppsAccordionDocument, options); } -export type SubsidiariesListForCustomerCreateEditExternalAppsAccordionQueryHookResult = ReturnType; -export type SubsidiariesListForCustomerCreateEditExternalAppsAccordionLazyQueryHookResult = ReturnType; -export type SubsidiariesListForCustomerCreateEditExternalAppsAccordionSuspenseQueryHookResult = ReturnType; -export type SubsidiariesListForCustomerCreateEditExternalAppsAccordionQueryResult = Apollo.QueryResult; +export type GetTaxIntegrationsForExternalAppsAccordionQueryHookResult = ReturnType; +export type GetTaxIntegrationsForExternalAppsAccordionLazyQueryHookResult = ReturnType; +export type GetTaxIntegrationsForExternalAppsAccordionSuspenseQueryHookResult = ReturnType; +export type GetTaxIntegrationsForExternalAppsAccordionQueryResult = Apollo.QueryResult; export const VoidCreditNoteDocument = gql` mutation voidCreditNote($input: VoidCreditNoteInput!) { voidCreditNote(input: $input) { diff --git a/src/hooks/useCreateEditCustomer.ts b/src/hooks/useCreateEditCustomer.ts index 0c98d187d..8635ae116 100644 --- a/src/hooks/useCreateEditCustomer.ts +++ b/src/hooks/useCreateEditCustomer.ts @@ -7,7 +7,6 @@ import { AddCustomerDrawerFragment, CreateCustomerInput, CreateCustomerMutation, - CustomerForExternalAppsAccordionFragmentDoc, CustomerItemFragmentDoc, LagoApiError, ProviderPaymentMethodsEnum, @@ -19,6 +18,67 @@ import { import { useInternationalization } from '~/hooks/core/useInternationalization' gql` + fragment CustomerForExternalAppsAccordion on Customer { + id + customerType + currency + paymentProvider + paymentProviderCode + # Name in the customer is netsuiteCustomer, but it's used as integrationCustomer in the create update inputs + netsuiteCustomer { + __typename + id + integrationId + externalCustomerId + integrationCode + integrationType + subsidiaryId + syncWithProvider + } + anrokCustomer { + __typename + id + integrationId + externalCustomerId + integrationCode + integrationType + syncWithProvider + } + xeroCustomer { + __typename + id + integrationId + externalCustomerId + integrationCode + integrationType + syncWithProvider + } + hubspotCustomer { + __typename + id + integrationId + externalCustomerId + integrationCode + integrationType + syncWithProvider + } + salesforceCustomer { + __typename + id + integrationId + externalCustomerId + integrationCode + integrationType + syncWithProvider + } + providerCustomer { + id + providerCustomerId + syncWithProvider + providerPaymentMethods + } + } + fragment AddCustomerDrawer on Customer { id addressLine1 @@ -38,7 +98,6 @@ gql` name firstname lastname - paymentProvider phone state timezone @@ -52,38 +111,6 @@ gql` zipcode } url - paymentProviderCode - providerCustomer { - id - providerCustomerId - syncWithProvider - providerPaymentMethods - } - netsuiteCustomer { - __typename - id - integrationId - } - anrokCustomer { - __typename - id - integrationId - } - xeroCustomer { - __typename - id - integrationId - } - hubspotCustomer { - __typename - id - integrationId - } - salesforceCustomer { - __typename - id - integrationId - } metadata { id key @@ -109,7 +136,6 @@ gql` } ${CustomerItemFragmentDoc} - ${CustomerForExternalAppsAccordionFragmentDoc} ` type UseCreateEditCustomer = (props: { customer?: AddCustomerDrawerFragment | null }) => {