Approve confirmation dialog (#2096)

* feat(backoffice-v2): approve functionality is now inside a confirmation dialog * revert(usedefaultblockslogic): removed instance of mock workflow
ballerine-io · Feb 19, 2024 · 80ee5b5 · 80ee5b5
1 parent 68fac8a
commit 80ee5b5
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 33 deletions.
diff --git a/apps/backoffice-v2/src/common/components/molecules/Dialog/Dialog.tsx b/apps/backoffice-v2/src/common/components/molecules/Dialog/Dialog.tsx
@@ -11,12 +11,12 @@ import { AnimatePresence } from 'framer-motion';
 import { DialogClose } from '@radix-ui/react-dialog';
 
 export interface DialogProps extends ComponentProps<typeof ShadCNDialog> {
-  trigger: ReactNode | Array<ReactNode>;
-  content: ReactNode | Array<ReactNode>;
-  title?: ReactNode | Array<ReactNode>;
-  description?: ReactNode | Array<ReactNode>;
-  footer?: ReactNode | Array<ReactNode>;
-  close?: ReactNode | Array<ReactNode>;
+  trigger: ReactNode | ReactNode[];
+  content: ReactNode | ReactNode[];
+  title?: ReactNode | ReactNode[];
+  description?: ReactNode | ReactNode[];
+  footer?: ReactNode | ReactNode[];
+  close?: ReactNode | ReactNode[];
   props?: {
     dialog?: ComponentProps<typeof ShadCNDialog>;
     trigger?: ComponentProps<typeof DialogTrigger>;

diff --git a/apps/backoffice-v2/src/lib/blocks/components/KycBlock/hooks/useKycBlock/useKycBlock.tsx b/apps/backoffice-v2/src/lib/blocks/components/KycBlock/hooks/useKycBlock/useKycBlock.tsx
@@ -18,9 +18,11 @@ import { useFilterId } from '@/common/hooks/useFilterId/useFilterId';
 import { useCaseDecision } from '@/pages/Entity/components/Case/hooks/useCaseDecision/useCaseDecision';
 import { ctw } from '@/common/utils/ctw/ctw';
 import { createBlocksTyped } from '@/lib/blocks/create-blocks-typed/create-blocks-typed';
-import { Badge } from '@ballerine/ui';
+import { Badge, Button } from '@ballerine/ui';
 import { WarningFilledSvg } from '@/common/components/atoms/icons';
 import { buttonVariants } from '@/common/components/atoms/Button/Button';
+import { MotionButton } from '@/common/components/molecules/MotionButton/MotionButton';
+import { motionButtonProps } from '@/lib/blocks/hooks/useAssosciatedCompaniesBlock/useAssociatedCompaniesBlock';
 
 const motionProps: ComponentProps<typeof MotionBadge> = {
   exit: { opacity: 0, transition: { duration: 0.2 } },
@@ -37,7 +39,7 @@ export const useKycBlock = ({
   parentWorkflowId: string;
 }) => {
   const { noAction } = useCaseDecision();
-  const results: Array<Array<string>> = [];
+  const results: string[][] = [];
   const kycSessionKeys = Object.keys(childWorkflow?.context?.pluginsOutput?.kyc_session ?? {});
 
   const docsData = useStorageFilesQuery(
@@ -674,14 +676,37 @@ export const useKycBlock = ({
         },
       })
       .addCell({
-        type: 'callToAction',
+        type: 'dialog',
         value: {
-          text: 'Approve',
-          onClick: onMutateApproveCase,
+          trigger: (
+            <MotionButton
+              {...motionButtonProps}
+              disabled={isDisabled}
+              size={'wide'}
+              variant={'success'}
+            >
+              Approve
+            </MotionButton>
+          ),
+          title: `Approval confirmation`,
+          description: <p className={`text-sm`}>Are you sure you want to approve?</p>,
+          close: (
+            <div className={`space-x-2`}>
+              <Button type={'button'} variant={`secondary`}>
+                Cancel
+              </Button>
+              <Button disabled={isDisabled} onClick={onMutateApproveCase}>
+                Approve
+              </Button>
+            </div>
+          ),
           props: {
-            disabled: isDisabled,
-            size: 'wide',
-            variant: 'success',
+            content: {
+              className: 'mb-96',
+            },
+            title: {
+              className: `text-2xl`,
+            },
           },
         },
       })

diff --git a/apps/backoffice-v2/src/lib/blocks/hooks/useDirectorsBlocks/useDirectorsBlocks.tsx b/apps/backoffice-v2/src/lib/blocks/hooks/useDirectorsBlocks/useDirectorsBlocks.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 import { getDocumentsByCountry, StateTag, TDocument } from '@ballerine/common';
-import { ctw } from '@ballerine/ui';
+import { Button, ctw } from '@ballerine/ui';
 import { UseQueryResult } from '@tanstack/react-query';
 import {
   composePickableCategoryType,
@@ -22,6 +22,8 @@ import { getRevisionReasonsForDocument } from '@/lib/blocks/components/Directors
 import { valueOrNA } from '@/common/utils/value-or-na/value-or-na';
 import { toTitleCase } from 'string-ts';
 import { DecisionStatus, Director } from '@/lib/blocks/hooks/useDirectorsBlocks/types';
+import { MotionButton } from '@/common/components/molecules/MotionButton/MotionButton';
+import { motionButtonProps } from '@/lib/blocks/hooks/useAssosciatedCompaniesBlock/useAssociatedCompaniesBlock';
 
 export const useDirectorsBlocks = ({
   workflow,
@@ -239,20 +241,50 @@ export const useDirectorsBlocks = ({
               return approvedBadgeBlock;
             } else {
               if (decisionStatus !== 'revision') {
+                const isApproveDisabled =
+                  (!isDoneWithRevision && Boolean(document?.decision?.status)) ||
+                  noAction ||
+                  isLoadingApproveTaskById;
                 const approveButtonBlock = createBlocksTyped()
                   .addBlock()
                   .addCell({
-                    type: 'callToActionLegacy',
+                    type: 'dialog',
                     value: {
-                      text: 'Approve',
+                      trigger: (
+                        <MotionButton
+                          {...motionButtonProps}
+                          disabled={isApproveDisabled}
+                          size={'wide'}
+                          variant={'success'}
+                        >
+                          Approve
+                        </MotionButton>
+                      ),
+                      title: `Approval confirmation`,
+                      description: <p className={`text-sm`}>Are you sure you want to approve?</p>,
+                      close: (
+                        <div className={`space-x-2`}>
+                          <Button type={'button'} variant={`secondary`}>
+                            Cancel
+                          </Button>
+                          <Button
+                            disabled={isApproveDisabled}
+                            onClick={onMutateApproveTaskById({
+                              taskId: document.id,
+                              contextUpdateMethod: 'director',
+                            })}
+                          >
+                            Approve
+                          </Button>
+                        </div>
+                      ),
                       props: {
-                        decision: 'approve',
-                        id: document.id,
-                        contextUpdateMethod: 'director',
-                        disabled:
-                          (!isDoneWithRevision && Boolean(document?.decision?.status)) || noAction,
-                        workflow,
-                        onReuploadNeeded,
+                        content: {
+                          className: 'mb-96',
+                        },
+                        title: {
+                          className: `text-2xl`,
+                        },
                       },
                     },
                   })

diff --git a/apps/backoffice-v2/src/lib/blocks/hooks/useDocumentBlocks/useDocumentBlocks.tsx b/apps/backoffice-v2/src/lib/blocks/hooks/useDocumentBlocks/useDocumentBlocks.tsx
@@ -27,6 +27,9 @@ import { useRejectTaskByIdMutation } from '@/domains/entities/hooks/mutations/us
 import { checkCanRevision } from '@/lib/blocks/hooks/useDocumentBlocks/utils/check-can-revision/check-can-revision';
 import { checkCanReject } from '@/lib/blocks/hooks/useDocumentBlocks/utils/check-can-reject/check-can-reject';
 import { checkCanApprove } from '@/lib/blocks/hooks/useDocumentBlocks/utils/check-can-approve/check-can-approve';
+import { MotionButton } from '@/common/components/molecules/MotionButton/MotionButton';
+import { motionButtonProps } from '@/lib/blocks/hooks/useAssosciatedCompaniesBlock/useAssociatedCompaniesBlock';
+import { Button } from '@ballerine/ui';
 
 export const useDocumentBlocks = ({
   workflow,
@@ -252,17 +255,43 @@ export const useDocumentBlocks = ({
               },
             })
             .addCell({
-              type: 'callToAction',
+              type: 'dialog',
               value: {
-                text: 'Approve',
-                onClick: onMutateApproveTaskById({
-                  taskId: id,
-                  contextUpdateMethod: 'base',
-                }),
+                trigger: (
+                  <MotionButton
+                    {...motionButtonProps}
+                    disabled={!canApprove}
+                    size={'wide'}
+                    variant={'success'}
+                  >
+                    Approve
+                  </MotionButton>
+                ),
+                title: `Approval confirmation`,
+                description: <p className={`text-sm`}>Are you sure you want to approve?</p>,
+                close: (
+                  <div className={`space-x-2`}>
+                    <Button type={'button'} variant={`secondary`}>
+                      Cancel
+                    </Button>
+                    <Button
+                      disabled={!canApprove}
+                      onClick={onMutateApproveTaskById({
+                        taskId: id,
+                        contextUpdateMethod: 'base',
+                      })}
+                    >
+                      Approve
+                    </Button>
+                  </div>
+                ),
                 props: {
-                  disabled: !canApprove,
-                  size: 'wide',
-                  variant: 'success',
+                  content: {
+                    className: 'mb-96',
+                  },
+                  title: {
+                    className: `text-2xl`,
+                  },
                 },
               },
             })