hamid
101 lines
4.1 KiB
TypeScript
101 lines
4.1 KiB
TypeScript
'use client';
|
|
import { FunctionComponent } from 'react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { useSnackbar } from 'notistack';
|
|
import { Skeleton, Stack, Typography } from '@mui/material';
|
|
import { AccentCard, AppButton, AppIcon } from '@/components';
|
|
import { useActivationChecklist } from '@/components/ActivationChecklist';
|
|
import { useSetAcceptingBookings } from '@/services/profiles';
|
|
|
|
/**
|
|
* The go-live gate for the nurse's services — **the real switch**, not a snackbar. Reads the same
|
|
* `useActivationChecklist` state `ActivationChecklist` renders (one source of truth, no duplicated
|
|
* search-visibility logic): unmet conditions render guidance naming exactly what's missing; met but
|
|
* paused renders the real `set_accepting_bookings` CTA; live renders the on state + a pause action.
|
|
* Success copy fires only after the mutation actually succeeds — this replaces the old
|
|
* `enqueueSnackbar('published')` no-op.
|
|
*/
|
|
const PublishGate: FunctionComponent = () => {
|
|
const t = useTranslations('verification');
|
|
const tActivation = useTranslations('activation');
|
|
const { enqueueSnackbar } = useSnackbar();
|
|
const state = useActivationChecklist();
|
|
const setAccepting = useSetAcceptingBookings();
|
|
|
|
if (state.isLoading) return <Skeleton variant="rounded" height={96} sx={{ borderRadius: 'var(--bal-radius-md)' }} />;
|
|
if (state.isError) return null; // ActivationChecklist (mounted alongside) already surfaces the error + retry.
|
|
|
|
const toggle = (accepting: boolean) => {
|
|
setAccepting.mutate(accepting, {
|
|
onSuccess: () =>
|
|
enqueueSnackbar(accepting ? t('publish_accepting_success') : t('publish_paused_success'), {
|
|
variant: 'success',
|
|
}),
|
|
onError: () => enqueueSnackbar(t('publish_toggle_error'), { variant: 'error' }),
|
|
});
|
|
};
|
|
|
|
const live = state.isSearchVisible && state.isAcceptingBookings;
|
|
|
|
return (
|
|
<AccentCard tone={live ? 'success' : state.isSearchVisible ? 'primary' : 'warning'} padding="md">
|
|
<Stack sx={{ gap: 1 }}>
|
|
<Stack direction="row" sx={{ gap: 1.5, alignItems: 'flex-start' }}>
|
|
<AppIcon
|
|
icon={live ? 'verified' : state.isSearchVisible ? 'publish' : 'warning'}
|
|
size={24}
|
|
color={live ? 'var(--bal-success)' : state.isSearchVisible ? 'var(--bal-primary)' : 'var(--bal-warning)'}
|
|
/>
|
|
<Stack sx={{ gap: 0.5, flexGrow: 1 }}>
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
|
|
{live
|
|
? t('publish_live_title')
|
|
: state.isSearchVisible
|
|
? t('publish_ready_title')
|
|
: t('publish_blocked_title')}
|
|
</Typography>
|
|
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
|
{live
|
|
? t('publish_live_body')
|
|
: state.isSearchVisible
|
|
? t('publish_ready_body')
|
|
: t('publish_unmet_intro', {
|
|
items: state.searchRows
|
|
.filter((row) => !row.passed)
|
|
.map((row) => tActivation(row.labelKey))
|
|
.join('، '),
|
|
})}
|
|
</Typography>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
|
|
{live ? (
|
|
<AppButton
|
|
color="inherit"
|
|
variant="outlined"
|
|
startIcon="pending"
|
|
onClick={() => toggle(false)}
|
|
disabled={setAccepting.isPending}
|
|
>
|
|
{setAccepting.isPending ? t('publish_toggling') : t('publish_pause_accepting')}
|
|
</AppButton>
|
|
) : state.isSearchVisible ? (
|
|
<AppButton
|
|
color="primary"
|
|
variant="contained"
|
|
startIcon="publish"
|
|
onClick={() => toggle(true)}
|
|
disabled={setAccepting.isPending}
|
|
>
|
|
{setAccepting.isPending ? t('publish_toggling') : t('publish_start_accepting')}
|
|
</AppButton>
|
|
) : null}
|
|
</Stack>
|
|
</Stack>
|
|
</AccentCard>
|
|
);
|
|
};
|
|
|
|
export default PublishGate;
|