feat: invoice custom section

src/components/customers/CustomerSettings.tsx

@@ -39,6 +39,7 @@ import {
   DeleteCustomerNetPaymentTermFragmentDoc,
   EditCustomerDocumentLocaleFragmentDoc,
   EditCustomerDunningCampaignFragmentDoc,
+  EditCustomerInvoiceCustomSectionFragmentDoc,
   EditCustomerInvoiceGracePeriodFragmentDoc,
   EditCustomerVatRateFragmentDoc,
   FinalizeZeroAmountInvoiceEnum,
@@ -77,6 +78,10 @@ import {
   EditCustomerDunningCampaignDialog,
   EditCustomerDunningCampaignDialogRef,
 } from './EditCustomerDunningCampaignDialog'
+import {
+  EditCustomerInvoiceCustomSectionsDialog,
+  EditCustomerInvoiceCustomSectionsDialogRef,
+} from './EditCustomerInvoiceCustomSectionsDialog'
 import {
   EditCustomerInvoiceGracePeriodDialog,
   EditCustomerInvoiceGracePeriodDialogRef,
@@ -116,6 +121,16 @@ gql`
     excludeFromDunningCampaign
   }
 
+  fragment CustomerAppliedInvoiceCustomSections on Customer {
+    applicableInvoiceCustomSections {
+      id
+      name
+      selected
+    }
+    skipInvoiceCustomSections
+    hasOverwrittenInvoiceCustomSectionsSelection
+  }
+
   query getCustomerSettings($id: ID!) {
     customer(id: $id) {
       id
@@ -130,6 +145,7 @@ gql`
 
       ...CustomerAppliedTaxRatesForSettings
       ...CustomerAppliedDunningCampaignForSettings
+      ...CustomerAppliedInvoiceCustomSections
 
       ...EditCustomerVatRate
       ...EditCustomerDocumentLocale
@@ -166,6 +182,7 @@ gql`
   ${EditCustomerInvoiceGracePeriodFragmentDoc}
   ${EditCustomerDocumentLocaleFragmentDoc}
   ${EditCustomerDunningCampaignFragmentDoc}
+  ${EditCustomerInvoiceCustomSectionFragmentDoc}
   ${DeleteCustomerGracePeriodFragmentDoc}
   ${DeleteCustomerDocumentLocaleFragmentDoc}
   ${CustomerForDeleteVatRateDialogFragmentDoc}
@@ -193,6 +210,8 @@ export const CustomerSettings = ({ customerId }: CustomerSettingsProps) => {
   const deleteGracePeriodDialogRef = useRef<DeleteCustomerGracePeriodeDialogRef>(null)
   const editCustomerDocumentLocale = useRef<EditCustomerDocumentLocaleDialogRef>(null)
   const editCustomerDunningCampaignDialogRef = useRef<EditCustomerDunningCampaignDialogRef>(null)
+  const editCustomerInvoiceCustomSectionsDialogRef =
+    useRef<EditCustomerInvoiceCustomSectionsDialogRef>(null)
   const deleteCustomerDocumentLocale = useRef<DeleteCustomerDocumentLocaleDialogRef>(null)
   const premiumWarningDialogRef = useRef<PremiumWarningDialogRef>(null)
   const editNetPaymentTermDialogRef = useRef<EditNetPaymentTermDialogRef>(null)
@@ -226,6 +245,8 @@ export const CustomerSettings = ({ customerId }: CustomerSettingsProps) => {
     !!dunningCampaign &&
     !!dunningCampaign?.thresholds.some((threshold) => threshold.currency === customer?.currency)
 
+  const isInvoiceCustomSectionApplicable = !!customer?.applicableInvoiceCustomSections?.length
+
   return (
     <>
       <SettingsPaddedContainer className="max-w-full px-0 md:px-0">
@@ -553,6 +574,76 @@ export const CustomerSettings = ({ customerId }: CustomerSettingsProps) => {
                 </Typography>
               </SettingsListItem>
 
+              {/* Invoice custom section */}
+              <SettingsListItem
+                className={tw(
+                  isInvoiceCustomSectionApplicable &&
+                    !customer.skipInvoiceCustomSections &&
+                    'shadow-inherit',
+                )}
+              >
+                <SettingsListItemHeader
+                  label={translate('text_1732553358445168zt8fopyf')}
+                  sublabel={translate('text_1732553358445p7rg0i0dzws')}
+                  action={
+                    hasPermissions(['customersUpdate']) ? (
+                      <Button
+                        disabled={loading}
+                        variant="quaternary"
+                        endIcon={isPremium ? undefined : 'sparkles'}
+                        onClick={() =>
+                          editCustomerInvoiceCustomSectionsDialogRef?.current?.openDialog()
+                        }
+                      >
+                        {translate('text_63e51ef4985f0ebd75c212fc')}
+                      </Button>
+                    ) : undefined
+                  }
+                />
+
+                {customer?.skipInvoiceCustomSections ? (
+                  <Typography variant="body" color="grey700">
+                    {translate('text_1735223938916tlygbi5v0nd')}
+                  </Typography>
+                ) : isInvoiceCustomSectionApplicable ? (
+                  <Table
+                    name="customer-custom-sections-settings"
+                    containerSize={{ default: 0 }}
+                    rowSize={48}
+                    isLoading={loading}
+                    data={customer.applicableInvoiceCustomSections || []}
+                    columns={[
+                      {
+                        key: 'name',
+                        title: translate('text_6419c64eace749372fc72b0f'),
+                        maxSpace: true,
+                        content: ({ name }) => (
+                          <Typography color="textSecondary" noWrap>
+                            {name}
+                          </Typography>
+                        ),
+                      },
+                      ...(!customer.hasOverwrittenInvoiceCustomSectionsSelection
+                        ? [
+                            {
+                              key: 'selected',
+                              title: translate('text_63ac86d797f728a87b2f9fa7'),
+                              content: ({ selected }) =>
+                                selected && (
+                                  <Chip label={translate('text_1729542098338prhjz7s29kt')} />
+                                ),
+                            } as TableColumn<{ selected: boolean }>,
+                          ]
+                        : []),
+                    ]}
+                  />
+                ) : (
+                  <Typography variant="body" color="grey700">
+                    {translate('text_1735223938916wjmtgs2juy4')}
+                  </Typography>
+                )}
+              </SettingsListItem>
+
               {/* Net payment term */}
               <SettingsListItem>
                 <SettingsListItemHeader
@@ -748,6 +839,10 @@ export const CustomerSettings = ({ customerId }: CustomerSettingsProps) => {
             ref={editCustomerDunningCampaignDialogRef}
             customer={customer}
           />
+          <EditCustomerInvoiceCustomSectionsDialog
+            ref={editCustomerInvoiceCustomSectionsDialogRef}
+            customer={customer}
+          />
           <DeleteCustomerGracePeriodeDialog ref={deleteGracePeriodDialogRef} customer={customer} />
           <DeleteCustomerDocumentLocaleDialog
             ref={deleteCustomerDocumentLocale}

src/components/customers/EditCustomerInvoiceCustomSectionsDialog.tsx

@@ -0,0 +1,231 @@
+import { gql } from '@apollo/client'
+import { useFormik } from 'formik'
+import { forwardRef } from 'react'
+import { array, mixed, object, string } from 'yup'
+
+import { Button, Dialog, DialogRef } from '~/components/designSystem'
+import { addToast } from '~/core/apolloClient'
+import {
+  CustomerAppliedInvoiceCustomSectionsFragmentDoc,
+  EditCustomerInvoiceCustomSectionFragment,
+  UpdateCustomerInput,
+  useEditCustomerInvoiceCustomSectionMutation,
+  useGetInvoiceCustomSectionsLazyQuery,
+} from '~/generated/graphql'
+import { useInternationalization } from '~/hooks/core/useInternationalization'
+
+import { MultipleComboBox, RadioField } from '../form'
+
+gql`
+  fragment EditCustomerInvoiceCustomSection on Customer {
+    id
+    externalId
+    applicableInvoiceCustomSections {
+      id
+      selected
+    }
+    hasOverwrittenInvoiceCustomSectionsSelection
+    skipInvoiceCustomSections
+  }
+
+  query getInvoiceCustomSections {
+    invoiceCustomSections {
+      collection {
+        id
+        name
+        code
+        selected
+      }
+    }
+  } 
+
+  mutation editCustomerInvoiceCustomSection($input: UpdateCustomerInput!) {
+    updateCustomer(input: $input) {
+      id
+      ...CustomerAppliedInvoiceCustomSections
+    }
+
+    ${CustomerAppliedInvoiceCustomSectionsFragmentDoc}
+  }
+`
+
+enum BehaviorType {
+  FALLBACK = 'fallback',
+  CUSTOM_SECTIONS = 'customSections',
+  DEACTIVATE = 'deactivate',
+}
+
+export type EditCustomerInvoiceCustomSectionsDialogRef = DialogRef
+
+interface EditCustomerInvoiceCustomSectionsDialogProps {
+  customer: EditCustomerInvoiceCustomSectionFragment
+}
+
+export const EditCustomerInvoiceCustomSectionsDialog = forwardRef<
+  DialogRef,
+  EditCustomerInvoiceCustomSectionsDialogProps
+>(({ customer }: EditCustomerInvoiceCustomSectionsDialogProps, ref) => {
+  const { translate } = useInternationalization()
+
+  const [getInvoiceCustomSections, { data }] = useGetInvoiceCustomSectionsLazyQuery()
+
+  const [editCustomerDunningCampaignBehavior] = useEditCustomerInvoiceCustomSectionMutation({
+    refetchQueries: ['getCustomerSettings'],
+    onCompleted: () => {
+      addToast({
+        severity: 'success',
+        message: translate('text_17352280436833uy9uxzbqn7'),
+      })
+    },
+  })
+
+  const formikProps = useFormik<{
+    behavior: BehaviorType | ''
+    applicableInvoiceCustomSectionIds: string[] | undefined
+  }>({
+    initialValues: {
+      behavior: customer.hasOverwrittenInvoiceCustomSectionsSelection
+        ? BehaviorType.CUSTOM_SECTIONS
+        : customer.skipInvoiceCustomSections
+          ? BehaviorType.DEACTIVATE
+          : BehaviorType.FALLBACK,
+      applicableInvoiceCustomSectionIds: customer.hasOverwrittenInvoiceCustomSectionsSelection
+        ? customer.applicableInvoiceCustomSections?.map((section) => section.id)
+        : undefined,
+    },
+    validationSchema: object().shape({
+      behavior: mixed().oneOf(Object.values(BehaviorType)).required(''),
+      applicableInvoiceCustomSectionIds: array()
+        .of(string())
+        .when('behavior', {
+          is: (val: BehaviorType) => val === BehaviorType.CUSTOM_SECTIONS,
+          then: (schema) => schema.min(1, ''),
+        }),
+    }),
+    onSubmit: async (values) => {
+      let formattedValues: UpdateCustomerInput = {
+        id: customer.id,
+        externalId: customer.externalId,
+      }
+
+      switch (values.behavior) {
+        case BehaviorType.FALLBACK:
+          formattedValues = {
+            ...formattedValues,
+            skipInvoiceCustomSections: false,
+            applicableInvoiceCustomSectionIds: [],
+          }
+          break
+        case BehaviorType.CUSTOM_SECTIONS:
+          formattedValues = {
+            ...formattedValues,
+            skipInvoiceCustomSections: false,
+            applicableInvoiceCustomSectionIds: values.applicableInvoiceCustomSectionIds,
+          }
+          break
+        case BehaviorType.DEACTIVATE:
+          formattedValues = {
+            ...formattedValues,
+            skipInvoiceCustomSections: true,
+            applicableInvoiceCustomSectionIds: null,
+          }
+          break
+      }
+
+      await editCustomerDunningCampaignBehavior({ variables: { input: formattedValues } })
+    },
+    validateOnMount: true,
+    enableReinitialize: true,
+  })
+
+  return (
+    <Dialog
+      ref={ref}
+      onOpen={async () => {
+        await getInvoiceCustomSections()
+      }}
+      title={translate('text_17352239389168sdqd97zo0t')}
+      description={translate('text_1735223938916hla21yfwyzw')}
+      actions={({ closeDialog }) => (
+        <>
+          <Button variant="quaternary" onClick={closeDialog}>
+            {translate('text_63ea0f84f400488553caa6a5')}
+          </Button>
+          <Button
+            variant="primary"
+            disabled={!formikProps.isValid || !formikProps.dirty}
+            onClick={async () => {
+              await formikProps.submitForm()
+              closeDialog()
+            }}
+          >
+            {translate('text_1735223938916q9pq0j0z0ju')}
+          </Button>
+        </>
+      )}
+    >
+      <div className="mb-8 not-last-child:mb-4">
+        <RadioField
+          name="behavior"
+          formikProps={formikProps}
+          value={BehaviorType.FALLBACK}
+          label={translate('text_17352239389166kugn45zj95')}
+          labelVariant="body"
+        />
+        <RadioField
+          name="behavior"
+          formikProps={formikProps}
+          value={BehaviorType.CUSTOM_SECTIONS}
+          label={translate('text_1735223938916ed8ef8phwaz')}
+          labelVariant="body"
+        />
+        {formikProps.values.behavior === BehaviorType.CUSTOM_SECTIONS && (
+          <MultipleComboBox
+            hideTags={false}
+            name="applicableInvoiceCustomSectionIds"
+            data={
+              data?.invoiceCustomSections?.collection
+                .filter(({ selected }) => !selected)
+                .map((section) => ({
+                  labelNode: section.name,
+                  label: section.name,
+                  description: section.code,
+                  value: section.id,
+                })) ?? []
+            }
+            onChange={(section) =>
+              formikProps.setFieldValue(
+                'applicableInvoiceCustomSectionIds',
+                section.map(({ value }) => value),
+              )
+            }
+            value={
+              formikProps.values.applicableInvoiceCustomSectionIds?.map((id) => {
+                const foundSection = data?.invoiceCustomSections?.collection.find(
+                  (section) => section.id === id,
+                )
+
+                return {
+                  value: id,
+                  label: foundSection?.name,
+                }
+              }) ?? []
+            }
+            placeholder={translate('text_1735223938916qvvv12r7je0')}
+            PopperProps={{ displayInDialog: true }}
+            emptyText={translate('text_1735223938916tlygbi5v0nd')}
+          />
+        )}
+        <RadioField
+          name="behavior"
+          formikProps={formikProps}
+          value={BehaviorType.DEACTIVATE}
+          label={translate('text_1735223938916dhd7cyzokib')}
+          labelVariant="body"
+        />
+      </div>
+    </Dialog>
+  )
+})
+
+EditCustomerInvoiceCustomSectionsDialog.displayName = 'EditCustomerInvoiceCustomSectionsDialog'