119 lines
4.6 KiB
TypeScript
119 lines
4.6 KiB
TypeScript
import axios from 'axios';
|
|
import React, { ReactNode, useEffect } from 'react';
|
|
import { FiUpload, FiEdit, FiFolder, FiArrowRight } from 'react-icons/fi';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { AppDispatch, RootState } from '../../store/store';
|
|
import api from '../../config/api';
|
|
import { setTransactionId, TRANSACTION_STATUS_ENUMS, updateTransactionStatus } from '../../store/slices/transactionSlice';
|
|
|
|
|
|
interface StartCard {
|
|
icon: ReactNode;
|
|
title: string;
|
|
description: string;
|
|
buttonText?: string;
|
|
bg: string;
|
|
}
|
|
|
|
const cards = [
|
|
{
|
|
icon: <FiUpload className="w-5 h-5 text-blue-700" />,
|
|
title: 'Start a Workflow',
|
|
description: 'Begin by uploading a document and tagging fields.',
|
|
buttonText: 'Start Now',
|
|
bg: 'bg-white/60',
|
|
},
|
|
{
|
|
icon: <FiEdit className="w-5 h-5 text-green-700" />,
|
|
title: 'Sign an Agreement',
|
|
description: 'Upload a document you need to sign and place your signature.',
|
|
bg: 'bg-white/60',
|
|
},
|
|
{
|
|
icon: <FiFolder className="w-5 h-5 text-purple-700" />,
|
|
title: 'Use a Template',
|
|
description: 'Pick from ready-made templates for common agreements.',
|
|
bg: 'bg-white/60',
|
|
},
|
|
];
|
|
|
|
const StartSection = () => {
|
|
const navigate = useNavigate();
|
|
const dispatch = useDispatch<AppDispatch>()
|
|
|
|
const user = useSelector((state: RootState) => state.user);
|
|
if (!user.account || user.account === null) {
|
|
window.location.href = "/login";
|
|
return;
|
|
}
|
|
|
|
const defaultAccountId = user.account.id;
|
|
|
|
const handleStartSectionClick = (card: StartCard) => {
|
|
if ("buttonText" in card && card.buttonText === "Start Now") {
|
|
api.post(`/api/accounts/${defaultAccountId}/transactions`)
|
|
.then(res => {
|
|
if (res.status === 200 || res.status === 201) {
|
|
dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED));
|
|
dispatch(setTransactionId(res.data));
|
|
setTimeout(() => navigate(`/process-step-one/${defaultAccountId}/${res.data}`), 0)
|
|
}
|
|
})
|
|
.catch(err => console.log(err))
|
|
}
|
|
// navigate("/process-step-one");
|
|
}
|
|
|
|
// useEffect(() => {
|
|
// try {
|
|
// axios.get(`${import.meta.env.VITE_BASE_URI}/api/dashboard`, {"withCredentials": true, "ngrok-skip-browser-warning": "69420"}).then((res) => {
|
|
// console.log(res)
|
|
// })
|
|
// } catch (error) {
|
|
// console.log(error)
|
|
// }
|
|
// }, [])
|
|
|
|
return (
|
|
<section className="px-4 py-3 w-full">
|
|
<h2 className="text-lg font-semibold text-gray-800 mb-2">Get Started</h2>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{cards.map((card, index) => (
|
|
<div
|
|
onClick={() => handleStartSectionClick(card)}
|
|
key={index}
|
|
className={`${card.bg} cursor-pointer relative border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-all h-full flex flex-col justify-between min-h-[220px]`}
|
|
>
|
|
{/* Icon + Text */}
|
|
<div className="flex flex-col gap-3">
|
|
<div className="w-9 h-9 flex items-center justify-center border border-gray-200 rounded-md bg-white">
|
|
{card.icon}
|
|
</div>
|
|
|
|
<h3 className="text-base font-medium text-gray-900">{card.title}</h3>
|
|
<p className="text-sm text-gray-700">{card.description}</p>
|
|
</div>
|
|
|
|
{/* Bottom Area */}
|
|
<div className="flex items-center justify-between mt-2">
|
|
{card.buttonText ? (
|
|
<button className="text-sm cursor-pointer font-medium text-white bg-gradient-to-r from-blue-600 to-blue-500 px-4 py-2 rounded-md shadow hover:opacity-90 transition">
|
|
{card.buttonText}
|
|
</button>
|
|
) : (
|
|
<div />
|
|
)}
|
|
|
|
<FiArrowRight className="w-4 h-4 text-gray-500" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default StartSection;
|