OwlCyberSecurity - MANAGER

Edit File: CardContent.jsx

import { useRef } from '@wordpress/element'; import { LaunchCard } from '@assist/components/dashboard/LaunchCard'; import { ActionButton } from '@assist/components/dashboard/buttons/ActionButton'; import { DismissButton } from '@assist/components/dashboard/buttons/DismissButton'; import { DemoCard } from '@assist/components/dashboard/cards/DemoCard'; import { GenericCard } from '@assist/components/dashboard/cards/GenericCard'; import { NoActionBtnCard } from '@assist/components/dashboard/cards/NoActionBtnCard'; import { DomainCard } from '@assist/components/dashboard/domains/DomainCard'; import { SecondaryDomainCard } from '@assist/components/dashboard/domains/SecondaryDomainCard'; import { useTours } from '@assist/hooks/useTours'; import { useTasksStore } from '@assist/state/tasks'; export const CardContent = ({ task }) => { if (task.type === 'html-text-button') return <GenericCard task={task} />; if (task.type === 'domain-task') return <DomainCard task={task} />; if (task.type === 'secondary-domain-task') return <SecondaryDomainCard task={task} />; if (task.type === 'site-launcher-task') return <LaunchCard task={task} />; if (task.type === 'demo-card') return <DemoCard task={task} />; if (task.type === 'no-action-btn-card') return <NoActionBtnCard task={task} />; return <TaskContent task={task} />; }; const TaskContent = ({ task }) => { const { isCompleted, dismissTask } = useTasksStore(); const { finishedTour } = useTours(); const isCompletedTask = isCompleted(task.slug) || finishedTour(task.slug); // lock state on internal Link buttons if task is not completed const lockedState = useRef( task.type === 'internalLink' && !isCompletedTask ? task : null, ); const handleDismiss = () => { lockedState.current = null; dismissTask(task.slug); }; return ( <div className="flex h-full w-full bg-cover bg-right-bottom bg-no-repeat" style={{ backgroundImage: `url(${task?.backgroundImage})`, }}> <div className="flex h-full w-full grow flex-col bg-white/95 px-8 py-8 lg:mr-48 lg:bg-transparent"> <div className="title text-2xl font-semibold leading-10 md:mt-32 lg:text-3xl"> {task.title} </div> <div className="description mt-2 text-sm md:text-base"> {task.description} </div> <div className="cta mt-8 flex flex-wrap items-center text-sm md:gap-3 rtl:justify-end"> <ActionButton task={lockedState.current ?? task} /> {lockedState.current || !isCompletedTask ? ( <DismissButton task={task} onClick={handleDismiss} /> ) : null} </div> </div> </div> ); };