feat: create preview invoice drawer

src/components/settings/invoices/PreviewCustomSectionDrawer.tsx

@@ -0,0 +1,108 @@
+import { gql } from '@apollo/client'
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+
+import { Button, Drawer, DrawerRef, Typography } from '~/components/designSystem'
+import {
+  CreateInvoiceCustomSectionInput,
+  useGetOrganizationCustomFooterForInvoiceLazyQuery,
+} from '~/generated/graphql'
+import { useInternationalization } from '~/hooks/core/useInternationalization'
+import Logo from '~/public/images/logo/lago-logo-grey.svg'
+
+gql`
+  query GetOrganizationCustomFooterForInvoice {
+    organization {
+      billingConfiguration {
+        invoiceFooter
+      }
+    }
+  }
+`
+
+type TPreviewCustomSectionDrawerProps = Pick<
+  CreateInvoiceCustomSectionInput,
+  'displayName' | 'details'
+>
+
+export interface PreviewCustomSectionDrawerRef {
+  openDrawer: (params: TPreviewCustomSectionDrawerProps) => void
+  closeDrawer: () => void
+}
+
+export const PreviewCustomSectionDrawer = forwardRef<PreviewCustomSectionDrawerRef>(
+  (_props, ref) => {
+    const { translate } = useInternationalization()
+    const drawerRef = useRef<DrawerRef>(null)
+    const [localData, setLocalData] = useState<
+      TPreviewCustomSectionDrawerProps & {
+        invoiceFooter?: string
+      }
+    >()
+
+    const [getOrganizationCustomFooter] = useGetOrganizationCustomFooterForInvoiceLazyQuery()
+
+    useImperativeHandle(ref, () => ({
+      openDrawer: async (args) => {
+        const { data } = await getOrganizationCustomFooter()
+
+        setLocalData({
+          ...args,
+          invoiceFooter: data?.organization?.billingConfiguration?.invoiceFooter ?? undefined,
+        })
+
+        drawerRef.current?.openDrawer()
+      },
+      closeDrawer: () => drawerRef.current?.closeDrawer(),
+    }))
+
+    const hasLocalData = localData?.displayName || localData?.details
+
+    return (
+      <Drawer
+        ref={drawerRef}
+        withPadding={false}
+        stickyBottomBar={({ closeDrawer }) => (
+          <div className="flex justify-end">
+            <Button onClick={closeDrawer}>{translate('text_62f50d26c989ab03196884ae')}</Button>
+          </div>
+        )}
+        title={
+          <div className="flex flex-1 flex-row items-center justify-between gap-1">
+            <Typography variant="bodyHl" color="textSecondary">
+              {translate('text_17326350108761jc0z8eusa8')}
+            </Typography>
+          </div>
+        }
+      >
+        <div className="h-full bg-grey-100 pb-12 pl-12">
+          <div className="flex size-full flex-col justify-end bg-white px-12 py-8">
+            {hasLocalData && (
+              <div className="flex flex-col gap-1 pb-6 shadow-b">
+                {localData?.displayName && (
+                  <Typography variant="captionHl" color="textSecondary">
+                    {localData.displayName}
+                  </Typography>
+                )}
+                {localData?.details && (
+                  <Typography variant="caption">{localData.details}</Typography>
+                )}
+              </div>
+            )}
+
+            <Typography variant="caption" className="py-6">
+              {localData?.invoiceFooter}
+            </Typography>
+            <div className="ml-auto flex flex-row items-center gap-1">
+              <Typography className="font-email text-xs font-normal" color="grey500">
+                {translate('text_6419c64eace749372fc72b03')}
+              </Typography>
+              <Logo height="12px" />
+            </div>
+          </div>
+        </div>
+      </Drawer>
+    )
+  },
+)
+
+PreviewCustomSectionDrawer.displayName = 'PreviewCustomSectionDrawer'

src/generated/graphql.tsx

@@ -7802,6 +7802,11 @@ export type UpdateOrganizationInvoiceTemplateMutationVariables = Exact<{
 
 export type UpdateOrganizationInvoiceTemplateMutation = { __typename?: 'Mutation', updateOrganization?: { __typename?: 'CurrentOrganization', id: string, billingConfiguration?: { __typename?: 'OrganizationBillingConfiguration', id: string, invoiceFooter?: string | null } | null } | null };
 
+export type GetOrganizationCustomFooterForInvoiceQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetOrganizationCustomFooterForInvoiceQuery = { __typename?: 'Query', organization?: { __typename?: 'CurrentOrganization', billingConfiguration?: { __typename?: 'OrganizationBillingConfiguration', invoiceFooter?: string | null } | null } | null };
+
 export type CreateInviteMutationVariables = Exact<{
   input: CreateInviteInput;
 }>;
@@ -18727,6 +18732,47 @@ export function useUpdateOrganizationInvoiceTemplateMutation(baseOptions?: Apoll
 export type UpdateOrganizationInvoiceTemplateMutationHookResult = ReturnType<typeof useUpdateOrganizationInvoiceTemplateMutation>;
 export type UpdateOrganizationInvoiceTemplateMutationResult = Apollo.MutationResult<UpdateOrganizationInvoiceTemplateMutation>;
 export type UpdateOrganizationInvoiceTemplateMutationOptions = Apollo.BaseMutationOptions<UpdateOrganizationInvoiceTemplateMutation, UpdateOrganizationInvoiceTemplateMutationVariables>;
+export const GetOrganizationCustomFooterForInvoiceDocument = gql`
+    query GetOrganizationCustomFooterForInvoice {
+  organization {
+    billingConfiguration {
+      invoiceFooter
+    }
+  }
+}
+    `;
+
+/**
+ * __useGetOrganizationCustomFooterForInvoiceQuery__
+ *
+ * To run a query within a React component, call `useGetOrganizationCustomFooterForInvoiceQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetOrganizationCustomFooterForInvoiceQuery` 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 } = useGetOrganizationCustomFooterForInvoiceQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useGetOrganizationCustomFooterForInvoiceQuery(baseOptions?: Apollo.QueryHookOptions<GetOrganizationCustomFooterForInvoiceQuery, GetOrganizationCustomFooterForInvoiceQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetOrganizationCustomFooterForInvoiceQuery, GetOrganizationCustomFooterForInvoiceQueryVariables>(GetOrganizationCustomFooterForInvoiceDocument, options);
+      }
+export function useGetOrganizationCustomFooterForInvoiceLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetOrganizationCustomFooterForInvoiceQuery, GetOrganizationCustomFooterForInvoiceQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetOrganizationCustomFooterForInvoiceQuery, GetOrganizationCustomFooterForInvoiceQueryVariables>(GetOrganizationCustomFooterForInvoiceDocument, options);
+        }
+export function useGetOrganizationCustomFooterForInvoiceSuspenseQuery(baseOptions?: Apollo.SkipToken | Apollo.SuspenseQueryHookOptions<GetOrganizationCustomFooterForInvoiceQuery, GetOrganizationCustomFooterForInvoiceQueryVariables>) {
+          const options = baseOptions === Apollo.skipToken ? baseOptions : {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<GetOrganizationCustomFooterForInvoiceQuery, GetOrganizationCustomFooterForInvoiceQueryVariables>(GetOrganizationCustomFooterForInvoiceDocument, options);
+        }
+export type GetOrganizationCustomFooterForInvoiceQueryHookResult = ReturnType<typeof useGetOrganizationCustomFooterForInvoiceQuery>;
+export type GetOrganizationCustomFooterForInvoiceLazyQueryHookResult = ReturnType<typeof useGetOrganizationCustomFooterForInvoiceLazyQuery>;
+export type GetOrganizationCustomFooterForInvoiceSuspenseQueryHookResult = ReturnType<typeof useGetOrganizationCustomFooterForInvoiceSuspenseQuery>;
+export type GetOrganizationCustomFooterForInvoiceQueryResult = Apollo.QueryResult<GetOrganizationCustomFooterForInvoiceQuery, GetOrganizationCustomFooterForInvoiceQueryVariables>;
 export const CreateInviteDocument = gql`
     mutation createInvite($input: CreateInviteInput!) {
   createInvite(input: $input) {

src/pages/settings/Invoices/CreateCustomSection.tsx

@@ -9,6 +9,10 @@ import {
   DefaultCustomSectionDialog,
   DefaultCustomSectionDialogRef,
 } from '~/components/settings/invoices/DefaultCustomSectionDialog'
+import {
+  PreviewCustomSectionDrawer,
+  PreviewCustomSectionDrawerRef,
+} from '~/components/settings/invoices/PreviewCustomSectionDrawer'
 import { WarningDialog, WarningDialogRef } from '~/components/WarningDialog'
 import { INVOICE_SETTINGS_ROUTE } from '~/core/router'
 import { CreateInvoiceCustomSectionInput } from '~/generated/graphql'
@@ -22,6 +26,7 @@ const CreateInvoiceCustomSection = () => {
 
   const warningDirtyAttributesDialogRef = useRef<WarningDialogRef>(null)
   const defaultCustomSectionDialogRef = useRef<DefaultCustomSectionDialogRef>(null)
+  const previewCustomSectionDrawerRef = useRef<PreviewCustomSectionDrawerRef>(null)
 
   const { loading, isEdition, invoiceCustomSection, onSave } = useCreateEditInvoiceCustomSection()
 
@@ -200,6 +205,18 @@ const CreateInvoiceCustomSection = () => {
                     rows="3"
                     multiline
                   />
+                  <Button
+                    startIcon="eye"
+                    variant="quaternary"
+                    onClick={() =>
+                      previewCustomSectionDrawerRef.current?.openDrawer({
+                        displayName: formikProps.values.displayName,
+                        details: formikProps.values.details,
+                      })
+                    }
+                  >
+                    {translate('text_173255335844629sa49oljif')}
+                  </Button>
                 </section>
 
                 <section className="not-last-child:mb-6">
@@ -250,6 +267,7 @@ const CreateInvoiceCustomSection = () => {
         onContinue={() => navigate(INVOICE_SETTINGS_ROUTE)}
       />
       <DefaultCustomSectionDialog ref={defaultCustomSectionDialogRef} />
+      <PreviewCustomSectionDrawer ref={previewCustomSectionDrawerRef} />
     </>
   )
 }

translations/base.json

@@ -647,9 +647,9 @@
   "text_62e0ee200a543924c8f67759": "Looks like there are no available credits, please top up this wallet. If you already did, it can take some time to be updated.",
   "text_62e0ee200a543924c8f6775d": "Top up credits",
   "text_62e161ceb87c201025388aa2": "Edit wallet",
-  "text_62e161ceb87c201025388ada": "Top up credits",
   "text_62e161ceb87c201025388ade": "Terminate wallet",
   "text_62e257c032ae895bbfead62e": "Wallet successfully terminated",
+  "text_62e161ceb87c201025388ada": "Top up credits",
   "text_62e2a2f2a79d60429eff3035": "Terminated",
   "text_62e79671d23ae6ff149de924": "Top up credits to this customer",
   "text_62e79671d23ae6ff149de928": "A new invoice will be generated for each top up. The credits granted will be added to the available balance once the invoice is paid.",
@@ -2746,5 +2746,7 @@
   "text_1732634307286joro3vhe88v": "This change will remove these invoice custom section as the default option for the organization. All customers currently using it will be affected. These details will no longer appear on their future invoices. Are you sure you want to proceed?",
   "text_1733841825248s6mxx67rsw7": "Edit invoice custom section",
   "text_17338418252493b2rz0ks49m": "Invoice custom section successfully created",
-  "text_1733841825249i5g7vr4gnzo": "Invoice custom section successfully edited"
+  "text_1733841825249i5g7vr4gnzo": "Invoice custom section successfully edited",
+  "text_17326350108761jc0z8eusa8": "Invoice preview",
+  "text_173255335844629sa49oljif": "Preview invoice"
 }