Skip to content

Commit

Permalink
show confirmation alert if the receipt is processing
Browse files Browse the repository at this point in the history
  • Loading branch information
breeg554 committed Sep 20, 2024
1 parent 329db76 commit 700c844
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 5 deletions.
2 changes: 1 addition & 1 deletion apps/web/app/components/modals/ConfirmationModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { cn } from '~/utils/cn';

export interface ConfirmationModalProps {
onConfirm?: () => Promise<void> | void;
onCancel?: () => Promise<void>;
onCancel?: () => Promise<void> | void;
confirmText?: React.ReactNode;
cancelText?: React.ReactNode;
isOpen: boolean;
Expand Down
1 change: 1 addition & 0 deletions apps/web/app/components/ui/dialog-drawer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ interface DialogDrawerRootProps extends BaseProps {
defaultOpen?: boolean;
open?: boolean;
onOpenChange?: (open: boolean) => void;
dismissible?: boolean;
}

interface DialogDrawerProps extends BaseProps {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useNavigate, useOutletContext } from '@remix-run/react';

import { CreateTransactionDto } from '~/api/Transaction/transactionApi.types';
import { Button } from '~/buttons/Button';
import { confirm } from '~/modals/confirm';
import { routes } from '~/routes';
import {
DialogDrawer,
Expand All @@ -15,7 +16,7 @@ import {
} from '~/ui/dialog-drawer';
import { useOrganizationName } from '~/utils/useOrganizationName';

import { ReceiptRetriever } from './components/ReceiptRetriever';
import { ReceiptRetriever, RetrieveState } from './components/ReceiptRetriever';

export const ScanPage = () => {
const organizationName = useOrganizationName();
Expand All @@ -24,8 +25,19 @@ export const ScanPage = () => {
onRetrieve: (retrieved: Partial<CreateTransactionDto>) => void;
}>();

const [processingState, setProcessingState] =
React.useState<RetrieveState>('idle');

const onClose = () => {
navigate(routes.newReceipt.getPath(organizationName));
if (processingState !== 'idle') {
confirm({
children:
'You are currently processing a receipt. Are you sure you want to leave this page?',
onConfirm: () => navigate(routes.newReceipt.getPath(organizationName)),
});
} else {
navigate(routes.newReceipt.getPath(organizationName));
}
};

const retrieve = (retrieved: Partial<CreateTransactionDto>) => {
Expand All @@ -34,7 +46,11 @@ export const ScanPage = () => {
};

return (
<DialogDrawer onOpenChange={onClose} open>
<DialogDrawer
onOpenChange={onClose}
dismissible={processingState === 'idle'}
open
>
<DialogDrawerContent
onSubmit={(e) => {
e.stopPropagation();
Expand All @@ -51,6 +67,7 @@ export const ScanPage = () => {
<DialogDrawerBody>
<ReceiptRetriever
onRetrieve={retrieve}
onStateChange={setProcessingState}
triggers={({ uploadPhoto }) => (
<div className="flex gap-2 items-center">
<Button
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { ReactNode, useRef } from 'react';
import React, { ReactNode, useEffect, useRef } from 'react';
import { useFetcher } from '@remix-run/react';
import { useBoolean } from 'usehooks-ts';

Expand All @@ -11,6 +11,8 @@ import { ItemList } from '~/list/ItemList';

import { action } from '../action.server';

export type RetrieveState = 'idle' | 'processing' | 'done';

interface ReceiptRetrieverProps {
triggers: ({
takePhoto,
Expand All @@ -20,11 +22,13 @@ interface ReceiptRetrieverProps {
uploadPhoto: () => void;
}) => ReactNode;
onRetrieve: (retrieved: Partial<CreateTransactionDto>) => void;
onStateChange?: (state: RetrieveState) => void;
}

export const ReceiptRetriever: React.FC<ReceiptRetrieverProps> = ({
triggers,
onRetrieve,
onStateChange,
}) => {
const fetcher = useFetcher<typeof action>();
const inputRef = useRef<HTMLInputElement>(null);
Expand Down Expand Up @@ -64,6 +68,16 @@ export const ReceiptRetriever: React.FC<ReceiptRetrieverProps> = ({
const isLoading = fetcher.state !== 'idle';
const data = fetcher.data;

useEffect(() => {
if (fetcher.state === 'idle' && fetcher.data) {
onStateChange?.('done');
} else if (fetcher.state === 'idle') {
onStateChange?.('idle');
} else {
onStateChange?.('processing');
}
}, [fetcher.state]);

const renderStep = () => {
if (isLoading) {
return <p>Loading...</p>;
Expand Down

0 comments on commit 700c844

Please sign in to comment.