B 2747 create od generation invoice panel (#640)

shared/features/invoice/hooks/use-invoice-upload/use-invoice-upload.tsx

@@ -8,11 +8,13 @@ import {
   HandleSendInvoiceProps,
   UseInvoiceUploadProps,
 } from "@/shared/features/invoice/hooks/use-invoice-upload/use-invoice-upload.types";
+import { useGenerateInvoice } from "@/shared/panels/_flows/request-payment-flow/_panels/generate-invoice/generate-invoice.hooks";
 import { usePosthog } from "@/shared/tracking/posthog/use-posthog";
 import { Translate } from "@/shared/translation/components/translate/translate";
 
 export function useInvoiceUpload({ billingProfileId, invoiceId }: UseInvoiceUploadProps) {
   const { capture } = usePosthog();
+  const { open: openGenerateInvoice } = useGenerateInvoice();
 
   const [queryParams, setQueryParams] = useState({});
 
@@ -26,8 +28,9 @@ export function useInvoiceUpload({ billingProfileId, invoiceId }: UseInvoiceUplo
       options: {
         onSuccess: () => {
           toast.success(<Translate token={"features:invoices.invoiceSubmission.toaster.success"} />);
-          // TODO handle close request panel
-          // closeRequestPanel();
+
+          openGenerateInvoice(false);
+          // TODO handle close manual upload panel
         },
         onError: () => {
           toast.error(<Translate token={"features:invoices.invoiceSubmission.toaster.error"} />);

shared/panels/_flows/request-payment-flow/_panels/billing-profile-selection/billing-profile-selection.tsx

@@ -65,6 +65,7 @@ function Content() {
       <SidePanelHeader
         title={{
           translate: {
+            // TODO update title
             token: "panels:singleContributionSelection.title",
           },
         }}

shared/panels/_flows/request-payment-flow/_panels/generate-invoice/_translations/generate-invoice.en.json

@@ -0,0 +1,6 @@
+{
+  "alert": {
+    "title": "Please double check that everything is correct",
+    "description": "Once approved it will trigger the payment process and can’t be edited."
+  }
+}

shared/panels/_flows/request-payment-flow/_panels/generate-invoice/generate-invoice.hooks.ts

@@ -0,0 +1,5 @@
+import { useSinglePanelContext } from "@/shared/features/side-panels/side-panel/side-panel";
+
+export function useGenerateInvoice() {
+  return useSinglePanelContext("generate-invoice");
+}

shared/panels/_flows/request-payment-flow/_panels/generate-invoice/generate-invoice.tsx

@@ -0,0 +1,104 @@
+import { Info } from "lucide-react";
+import { useMemo } from "react";
+
+import { Button } from "@/design-system/atoms/button/variants/button-default";
+import { Skeleton } from "@/design-system/atoms/skeleton";
+import { Alert } from "@/design-system/molecules/alert";
+
+import { ErrorState } from "@/shared/components/error-state/error-state";
+import { useInvoicePreview } from "@/shared/features/invoice/hooks/use-invoice-preview/use-invoice-preview";
+import { useInvoiceUpload } from "@/shared/features/invoice/hooks/use-invoice-upload/use-invoice-upload";
+import InvoiceViewer from "@/shared/features/invoice/viewer/invoice-viewer";
+import { SidePanelBody } from "@/shared/features/side-panels/side-panel-body/side-panel-body";
+import { SidePanelFooter } from "@/shared/features/side-panels/side-panel-footer/side-panel-footer";
+import { SidePanelHeader } from "@/shared/features/side-panels/side-panel-header/side-panel-header";
+import { useSidePanel } from "@/shared/features/side-panels/side-panel/side-panel";
+import { useGenerateInvoice } from "@/shared/panels/_flows/request-payment-flow/_panels/generate-invoice/generate-invoice.hooks";
+import { useRequestPaymentFlow } from "@/shared/panels/_flows/request-payment-flow/request-payment-flow.context";
+import { Translate } from "@/shared/translation/components/translate/translate";
+
+function Content() {
+  const { billingProfileId = "", rewardIds } = useRequestPaymentFlow();
+
+  const {
+    isLoading: isLoadingInvoicePreview,
+    isError,
+    fileBlob,
+    fileUrl,
+    invoiceId,
+  } = useInvoicePreview({
+    rewardIds,
+    billingProfileId,
+    isSample: false,
+  });
+
+  const { isPendingUploadInvoice, handleSendInvoice } = useInvoiceUpload({
+    billingProfileId,
+    invoiceId,
+  });
+
+  const renderInvoicePreview = useMemo(() => {
+    if (isLoadingInvoicePreview) {
+      return (
+        <div className={"grid gap-md"}>
+          <Skeleton classNames={{ base: "h-16" }} />
+          <Skeleton classNames={{ base: "h-16" }} />
+          <Skeleton classNames={{ base: "h-16" }} />
+          <Skeleton classNames={{ base: "h-16" }} />
+        </div>
+      );
+    }
+    if (isError) {
+      return <ErrorState />;
+    }
+    if (fileUrl) {
+      return <InvoiceViewer fileUrl={fileUrl} />;
+    }
+    return null;
+  }, [isLoadingInvoicePreview, isError, fileUrl]);
+
+  return (
+    <>
+      <SidePanelHeader
+        title={{
+          translate: {
+            // TODO update title
+            token: "panels:singleContributionSelection.title",
+          },
+        }}
+        canClose
+      />
+
+      <SidePanelBody>
+        <Alert
+          color="grey"
+          title={<Translate token="panels:generateInvoice.alert.title" />}
+          description={<Translate token="panels:generateInvoice.alert.description" />}
+          icon={{ component: Info }}
+        />
+        {renderInvoicePreview}
+      </SidePanelBody>
+      <SidePanelFooter>
+        <Button
+          variant={"secondary"}
+          size={"md"}
+          onClick={() => handleSendInvoice({ fileBlob })}
+          isDisabled={!fileBlob}
+          isLoading={isPendingUploadInvoice}
+          translate={{ token: "common:form.send" }}
+        />
+      </SidePanelFooter>
+    </>
+  );
+}
+
+export function GenerateInvoice() {
+  const { name } = useGenerateInvoice();
+  const { Panel } = useSidePanel({ name });
+
+  return (
+    <Panel>
+      <Content />
+    </Panel>
+  );
+}

shared/panels/_flows/request-payment-flow/_panels/generate-invoice/generate-invoice.types.ts

@@ -0,0 +1 @@
+export interface GenerateInvoiceProps {}

shared/panels/_flows/request-payment-flow/request-payment-flow.context.tsx

@@ -4,6 +4,7 @@ import { PropsWithChildren, createContext, useContext, useState } from "react";
 
 import { BillingProfileSelection } from "@/shared/panels/_flows/request-payment-flow/_panels/billing-profile-selection/billing-profile-selection";
 import { useBillingProfileSelection } from "@/shared/panels/_flows/request-payment-flow/_panels/billing-profile-selection/billing-profile-selection.hooks";
+import { GenerateInvoice } from "@/shared/panels/_flows/request-payment-flow/_panels/generate-invoice/generate-invoice";
 
 import { OpenProps, RequestPaymentFlowContextInterface, SelectedState } from "./request-payment-flow.types";
 
@@ -61,6 +62,7 @@ export function RequestPaymentFlowProvider({ children }: PropsWithChildren) {
     >
       {children}
       <BillingProfileSelection />
+      <GenerateInvoice />
     </RequestPaymentFlowContext.Provider>
   );
 }

shared/panels/_translations/panels.translate.ts

@@ -1,3 +1,4 @@
+import enGenerateInvoice from "@/shared/panels/_flows/request-payment-flow/_panels/generate-invoice/_translations/generate-invoice.en.json";
 import enBulkContributionSelection from "@/shared/panels/_flows/reward-flow/_panels/bulk-contribution-selection/_translations/bulk-contribution-selection.en.json";
 import enBulkContributionValidation from "@/shared/panels/_flows/reward-flow/_panels/bulk-contribution-validation/_translations/bulk-contribution-validation.en.json";
 import enBulkContributorsSelection from "@/shared/panels/_flows/reward-flow/_panels/bulk-contributor-selection/_translations/bulk-contributors-selection.en.json";
@@ -43,5 +44,6 @@ export const enPanelsTranslation = {
     bulkContributionValidation: enBulkContributionValidation,
     singleContributionValidation: enSingleContributionValidation,
     rewardFlow: enRewardFlow,
+    generateInvoice: enGenerateInvoice,
   },
 };

shared/translation/translations/common/common.en.json

@@ -84,7 +84,8 @@
   },
   "form": {
     "reset": "Reset",
-    "save": "Save"
+    "save": "Save",
+    "send": "Send"
   },
   "description": "Description",
   "billingProfileType": {