@hhgtech/hhg-components
Version:
Hello Health Group common components
899 lines (857 loc) • 57.6 kB
JavaScript
import { _ as __rest, a as __awaiter } from './tslib.es6-ea4dfe68.js';
import React__default, { useMemo, useState, useEffect, Fragment } from 'react';
import { Stack, Flex, Badge, Grid, Box, Input, Container, AspectRatio as AspectRatio$1, Tabs, ScrollArea, Divider, SimpleGrid } from '@mantine/core';
import { t as themeColors, b as AspectRatio } from './index-5d405c0d.js';
import '@mantine/dates';
import './index-5e947517.js';
import { G as Gender } from './index-90813715.js';
import './index-ebe66e27.js';
import './useMantineLocale-0c6bea99.js';
import { T as Text } from './index-9f5659e8.js';
import { B as Button } from './index-c68a0fa7.js';
import { theme } from './miscTheme.js';
import './index.styles-770020ac.js';
import { u as useTranslations } from './index-9d21b711.js';
import { useDisclosure } from '@mantine/hooks';
import './other-4ccb5568.js';
import './index-c2190f6e.js';
import styled from '@emotion/styled';
import { M as MediaQueries } from './utils-cb7242c7.js';
import { S as Switch } from './index-69c990dc.js';
import './translationsContext-3a9e3453.js';
import { Current, Upcoming, Missed, Vaccinated, ArrowRight } from '@hhgtech/icons/other';
import { u as useScreenSize } from './useScreenSize-981e5b51.js';
import { M as Modal } from './index-5d32e000.js';
import { useForm } from '@mantine/form';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import { D as DatePicker } from './index-afb403a9.js';
import { H as Heading } from './index-dcc517ff.js';
import '@mantine/carousel';
import './Locale-f270bd9d.js';
import 'classnames';
import './useUniqueId-4305c9aa.js';
import './constantsSite.js';
import '@hhgtech/icons/core';
import 'date-fns/locale';
import './constantsDomainLocales.js';
import './constantsRiskScreener.js';
import './constantsIsProduction.js';
import '@mantine/notifications';
const StyledVaccineCard = styled.div `
position: relative;
padding: 16px;
min-height: 110px;
background: ${theme.colors.neutral50};
width: 100%;
border-right: 2px solid;
border-radius: 8px;
&[data-template='modal'] {
border: none;
}
&[data-status='next'],
&[data-status='current'] {
border-color: ${theme.colors.primaryBase};
&[data-template='modal'] {
background: ${theme.colors.primary50};
}
}
&[data-status='vaccinated'] {
border-color: ${theme.colors.green600};
&[data-template='modal'] {
background: ${theme.colors.green50};
}
}
&[data-status='missed'] {
border-color: ${theme.colors.yellow800};
&[data-template='modal'] {
background: ${theme.colors.yellow50};
}
}
&[data-status='upcoming'] {
border-color: ${theme.colors.neutral300};
}
${MediaQueries.mbDown} {
padding: 12px;
gap: 8px;
}
`;
const StyledInformationWrapper = styled.div `
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
width: 100%;
.dot {
height: 5px;
width: 5px;
background-color: ${theme.colors.gray300};
border-radius: 50%;
display: flex;
align-self: center;
}
`;
const _Immunization = (_a) => {
var { vaccineDetail, isCurrent } = _a, rest = __rest(_a, ["vaccineDetail", "isCurrent"]);
const { t } = useTranslations();
const { name, antigen, optional } = vaccineDetail;
return (React__default.createElement(StyledVaccineCard, Object.assign({}, rest, { "data-template": "modal", "data-status": isCurrent ? 'next' : status }),
React__default.createElement(Stack, { spacing: 12 },
React__default.createElement(Stack, { spacing: 4 },
React__default.createElement(Button, { variant: "ghost", styles: {
root: {
padding: 0,
height: 'initial',
'&:hover:hover': {
backgroundColor: 'transparent',
},
},
inner: {
padding: 0,
justifyContent: 'left',
},
} },
React__default.createElement(Text, { size: "s3", color: theme.colors.gray800, weight: "semiBold" }, name)),
React__default.createElement(Flex, { gap: 4, align: 'center' },
antigen && (React__default.createElement(Text, { size: "n1", color: themeColors.gray[6] },
t('babyVaccine.timeline.antigen'),
"\u00A0",
React__default.createElement(Text, { size: "s5", weight: "semiBold", as: "span" }, antigen))),
React__default.createElement(Badge, { px: 8, py: 1, radius: 'xl', sx: {
height: 'initial',
border: `1px solid ${optional ? theme.colors.neutral100 : 'transparent'}`,
}, bg: optional ? theme.colors.white : theme.colors.red50 },
React__default.createElement(Text, { size: "n1", color: optional ? theme.colors.gray800 : theme.colors.red800, tt: 'capitalize' }, optional
? t('babyVaccine.vaccineInfo.optional')
: t('babyVaccine.vaccineInfo.mandatory'))))))));
};
const _VaccineStatus = ({ checked, onToggle: _onToggle, }) => {
const { t } = useTranslations();
const onToggle = (event) => {
_onToggle === null || _onToggle === void 0 ? void 0 : _onToggle(event.currentTarget.checked);
};
return (React__default.createElement(Switch, { checked: checked, onChange: onToggle, label: t('babyVaccine.vaccineCard.injected'), size: "xs", color: 'green.6', styles: {
root: {
'*': {
cursor: 'pointer',
},
},
input: {
display: 'none',
},
} }));
};
const _CardIcon = ({ status, isCurrent }) => {
switch (status) {
case 'vaccinated':
return React__default.createElement(Vaccinated, null);
case 'missed':
return React__default.createElement(Missed, null);
case 'all':
return null;
case 'next':
return React__default.createElement(Current, null);
default:
return isCurrent ? React__default.createElement(Current, null) : React__default.createElement(Upcoming, null);
}
};
const MAPPED_STATUS = {
vaccinated: {
backgroundColor: themeColors.green[0],
borderColor: themeColors.green[2],
color: themeColors.green[7],
},
missed: {
backgroundColor: themeColors.yellow[0],
borderColor: themeColors.yellow[2],
color: themeColors.yellow[9],
},
upcoming: {
backgroundColor: themeColors.neutral[0],
borderColor: themeColors.neutral[1],
color: themeColors.gray[8],
},
next: {
backgroundColor: themeColors.blue[0],
borderColor: 'transparent',
color: themeColors.blue[6],
},
all: {
backgroundColor: themeColors.blue[0],
borderColor: 'transparent',
color: themeColors.blue[6],
},
};
function formatBabyVaccinationDetail(data) {
var _a;
if (!data)
return {};
return {
profile: formatBabyVaccinationProfile(data.profile),
vaccineSchedules: (_a = data === null || data === void 0 ? void 0 : data.vaccine_schedules) === null || _a === void 0 ? void 0 : _a.map(formatBabyVaccinationSchedule),
notifications: data.notifications,
welcome: data.welcome,
additionalQuestions: data.additional_questions || [],
};
}
function formatBabyVaccinationProfile(profile) {
return {
id: profile === null || profile === void 0 ? void 0 : profile.id,
gender: (profile === null || profile === void 0 ? void 0 : profile.gender) ? 'male' : 'female',
name: profile === null || profile === void 0 ? void 0 : profile.name,
dob: profile === null || profile === void 0 ? void 0 : profile.dob,
isNew: profile === null || profile === void 0 ? void 0 : profile.new,
parentId: profile === null || profile === void 0 ? void 0 : profile.parent_id,
};
}
function formatBabyVaccinationSchedule(schedule) {
if (!schedule)
return {};
return {
id: schedule.id,
title: schedule.title,
description: schedule.description,
readMoreUrl: schedule.read_more_url,
iconBoy: schedule.icon_boy,
iconGirl: schedule.icon_girl,
timelines: schedule.timelines.map(formatBabyVaccinationTimeline),
};
}
function formatBabyVaccinationTimeline(timeline) {
if (!timeline)
return {};
return {
id: timeline.id,
name: timeline.name,
shortName: timeline.short_name,
fromDay: timeline.from_day,
toDay: timeline.to_day,
records: timeline.records.map(formatBabyVaccinationRecord),
age: Number(timeline.number_age),
recurrence: timeline.unit_age,
};
}
function formatBabyVaccinationRecord(record) {
if (!record)
return {};
return {
id: record.id,
vaccineId: record.vaccine_id,
vaccineName: record.vaccine_name,
vaccineAntigen: record.vaccine_antigen,
vaccineOptional: record.vaccine_optional,
givenOn: record.given_on,
doseNumber: record.dose_number,
totalDoses: record.total_doses,
status: record.status,
vaccineStatus: record.vaccine_status,
};
}
function formatBabyVaccineDetail(data) {
if (!data)
return {};
return {
id: data.id || 0,
name: data.name || '',
antigen: data.antigen || '',
brandImg: data.brand_img || '',
benefits: data.benefits,
link: data.link,
contraindications: data.contraindications,
optional: data.optional,
detail: data.detail,
records: data.records.map(formatBabyVaccinationRecord),
};
}
const generateTimeLineName = (timeline, t) => {
switch (timeline.recurrence) {
case 'year': {
return t('childCard.age.yearNoMonth', { year: timeline.age });
}
case 'month': {
return t('childCard.age.months', { month: timeline.age });
}
case 'week': {
if (timeline.age === 0) {
return t('babyVaccine.timeline.atBirth');
}
return t('childCard.age.week', { weeks: timeline.age });
}
default: {
return '';
}
}
};
const _Badge = (_a) => {
var _b;
var { status, sx, content = '' } = _a, rest = __rest(_a, ["status", "sx", "content"]);
return (React__default.createElement(Badge, Object.assign({ leftSection: status !== 'all' && (React__default.createElement(AspectRatio, { ratio: 1, w: 18 },
React__default.createElement(_CardIcon, { status: status }))), px: 8, py: 3, radius: 4, sx: Object.assign(Object.assign({ height: 'initial', backgroundColor: themeColors.blue[0], borderColor: themeColors.blue[2], color: themeColors.blue[7] }, MAPPED_STATUS[status]), sx) }, rest),
React__default.createElement(Text, { size: "n1", span: true, tt: 'capitalize', color: String((_b = MAPPED_STATUS[status]) === null || _b === void 0 ? void 0 : _b.color) }, content || status)));
};
const _Modal = (_a) => {
var { vaccineRecord, isCurrent, onToggle, showTopDetail = true } = _a, rest = __rest(_a, ["vaccineRecord", "isCurrent", "onToggle", "showTopDetail"]);
const { t } = useTranslations();
const { status, vaccineOptional, vaccineName, doseNumber, totalDoses, vaccineAntigen, } = vaccineRecord;
return (React__default.createElement(StyledVaccineCard, Object.assign({}, rest, { "data-template": "modal", "data-status": isCurrent ? 'next' : status }),
React__default.createElement(Stack, { spacing: 12 },
showTopDetail && (React__default.createElement(Flex, { align: "center", justify: "space-between" },
React__default.createElement(_Badge, { status: status, content: t(`babyVaccine.status.${status}`) }),
React__default.createElement(_VaccineStatus, { checked: status === 'vaccinated', onToggle: (status) => onToggle(status, vaccineRecord) }))),
React__default.createElement(Stack, { spacing: 4 },
React__default.createElement(Button, { variant: "ghost", styles: {
root: {
padding: 0,
height: 'initial',
'&:hover:hover': {
backgroundColor: 'transparent',
},
},
inner: {
padding: 0,
justifyContent: 'left',
},
} },
React__default.createElement(Text, { size: "s3", color: theme.colors.gray800, weight: "semiBold" }, vaccineName)),
React__default.createElement(Flex, { gap: 4, align: 'center' },
vaccineAntigen && (React__default.createElement(Text, { size: "n1", color: themeColors.gray[6] },
t('babyVaccine.timeline.antigen'),
"\u00A0",
React__default.createElement(Text, { size: "s5", weight: "semiBold", as: "span" }, vaccineAntigen))),
React__default.createElement(Badge, { px: 8, py: 1, radius: 'xl', sx: {
height: 'initial',
border: `1px solid ${vaccineOptional ? theme.colors.neutral100 : 'transparent'}`,
}, bg: vaccineOptional ? theme.colors.white : theme.colors.red50 },
React__default.createElement(Text, { size: "n1", color: vaccineOptional ? theme.colors.gray800 : theme.colors.red800, tt: 'capitalize' }, vaccineOptional
? t('babyVaccine.vaccineInfo.optional')
: t('babyVaccine.vaccineInfo.mandatory')))),
React__default.createElement(Text, { size: "n1", color: theme.colors.gray600 },
React__default.createElement("span", { dangerouslySetInnerHTML: {
__html: t('babyVaccine.vaccineInfo.dose', {
ordinal: `<b>${doseNumber}</b>`,
total: totalDoses,
}),
} }))))));
};
const _Timeline = (_a) => {
var { vaccineRecord, onToggle, onTitleClick } = _a, rest = __rest(_a, ["vaccineRecord", "onToggle", "onTitleClick"]);
const { t } = useTranslations();
const { status, vaccineOptional, vaccineName, doseNumber, totalDoses, givenOn, vaccineAntigen, } = vaccineRecord;
return (React__default.createElement(StyledVaccineCard, Object.assign({}, rest, { "data-status": status }),
React__default.createElement(Stack, { spacing: 12 },
React__default.createElement(Flex, { align: "center", justify: "space-between" },
React__default.createElement(_Badge, { status: status, content: t(`babyVaccine.status.${status}`) }),
React__default.createElement(_VaccineStatus, { checked: status === 'vaccinated', onToggle: (status) => onToggle(status, vaccineRecord) })),
React__default.createElement(Stack, { spacing: 4 },
React__default.createElement("div", { onClick: () => onTitleClick(vaccineRecord) },
React__default.createElement(Text, { size: "s3", color: theme.colors.gray800, weight: "semiBold", sx: { cursor: 'pointer' } }, vaccineName)),
React__default.createElement(Flex, { gap: 4, align: 'center' },
vaccineAntigen && (React__default.createElement(Text, { size: "n1", color: themeColors.gray[6] },
t('babyVaccine.timeline.antigen'),
"\u00A0",
React__default.createElement(Text, { size: "s5", weight: "semiBold", as: "span" }, vaccineAntigen))),
React__default.createElement(Badge, { px: 8, py: 1, radius: 'xl', sx: {
height: 'initial',
border: `1px solid ${vaccineOptional ? theme.colors.neutral100 : 'transparent'}`,
}, bg: vaccineOptional ? theme.colors.white : theme.colors.red50 },
React__default.createElement(Text, { size: "n1", color: vaccineOptional ? theme.colors.gray800 : theme.colors.red800, tt: 'capitalize' }, vaccineOptional
? t('babyVaccine.vaccineInfo.optional')
: t('babyVaccine.vaccineInfo.mandatory')))),
React__default.createElement(StyledInformationWrapper, null,
React__default.createElement(Text, { size: "n1", color: theme.colors.gray600 },
React__default.createElement("span", { dangerouslySetInnerHTML: {
__html: t('babyVaccine.vaccineInfo.dose', {
ordinal: `<b>${doseNumber}</b>`,
total: totalDoses,
}),
} })),
React__default.createElement("span", { className: "dot" }),
React__default.createElement(Text, { size: "n1", color: theme.colors.gray600 }, status === 'vaccinated'
? t('babyVaccine.vaccineInfo.injectedDate', {
date: givenOn,
})
: t('babyVaccine.vaccineInfo.suggested', {
date: givenOn,
})))))));
};
function withVaccineCard(WrappedComponent) {
// Try to create a nice displayName for React Dev Tools.
const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
// Creating the inner component. The calculated Props type here is the where the magic happens.
const ComponentWithVaccineCard = (_a) => {
// Fetch the props you want to inject. This could be done with context instead.
var { vaccineRecord, isCurrent, onToggle } = _a, rest = __rest(_a, ["vaccineRecord", "isCurrent", "onToggle"]);
const themeProps = {
vaccineRecord,
isCurrent,
onToggle,
};
// props comes afterwards so the can override the default ones.
return React__default.createElement(WrappedComponent, Object.assign({}, themeProps, rest));
};
ComponentWithVaccineCard.displayName = `withVaccineCard(${displayName})`;
return ComponentWithVaccineCard;
}
const VaccineCardTimeline = React__default.memo(withVaccineCard(_Timeline));
const VaccineCardModal = React__default.memo(withVaccineCard(_Modal));
const VaccineCardImmunization = React__default.memo(withVaccineCard(_Immunization));
const StyledCurrentLineWrapper = styled.div `
flex-shrink: 1;
display: flex;
align-items: center;
width: 100%;
height: 42px;
.line {
flex-grow: 1;
height: 1px;
background: ${theme.colors.neutral200};
}
.dot {
height: 8px;
width: 8px;
background-color: ${theme.colors.neutral200};
border-radius: 50%;
display: flex;
align-self: center;
}
&[data-is-current='true'] {
.line {
background-color: ${theme.colors.primaryBase};
}
.dot {
background-color: ${theme.colors.primaryBase};
}
}
${MediaQueries.mbDown} {
height: 22px;
}
`;
const _Record = (_a) => {
var { records, isCurrent, onTitleClick, onToggle } = _a, rest = __rest(_a, ["records", "isCurrent", "onTitleClick", "onToggle"]);
return (React__default.createElement(Stack, Object.assign({ spacing: 8 }, rest), records.map((item, index) => (React__default.createElement(VaccineCardTimeline, { key: index, vaccineRecord: item, isCurrent: isCurrent && index === 0, onTitleClick: onTitleClick, onToggle: onToggle })))));
};
const _ScheduleTimeline = (_a) => {
var _b, _c;
var { timeline, onToggle, onTitleClick, isCurrent: _isCurrent = false } = _a, rest = __rest(_a, ["timeline", "onToggle", "onTitleClick", "isCurrent"]);
const { t } = useTranslations();
const { isMobile } = useScreenSize();
const isCurrent = useMemo(() => {
var _a;
return (_isCurrent ||
((_a = timeline === null || timeline === void 0 ? void 0 : timeline.records) === null || _a === void 0 ? void 0 : _a.some((record) => record.status === 'next')));
}, [timeline, _isCurrent]);
if (((_b = timeline === null || timeline === void 0 ? void 0 : timeline.records) === null || _b === void 0 ? void 0 : _b.length) === 0)
return null;
return (React__default.createElement("div", Object.assign({}, rest),
React__default.createElement(Grid, { key: timeline.id, gutter: 16, py: 16 },
React__default.createElement(Grid.Col, { span: "content" },
React__default.createElement(Text, { size: "s4", color: isCurrent ? theme.colors.primaryBase : theme.colors.gray800, weight: "semiBold", sx: {
height: 42,
width: 100,
display: 'flex',
alignItems: 'center',
[MediaQueries.mbDown]: {
height: 22,
},
} }, generateTimeLineName(timeline, t))),
React__default.createElement(Grid.Col, { span: "auto" },
React__default.createElement(StyledCurrentLineWrapper, { "data-is-current": isCurrent },
React__default.createElement("span", { className: "dot" }),
React__default.createElement("div", { className: "line" }),
React__default.createElement(Text, { size: "n1", ml: 16 },
React__default.createElement("span", { dangerouslySetInnerHTML: {
__html: t('babyVaccine.timeline.total', {
number: `<b>${(_c = timeline === null || timeline === void 0 ? void 0 : timeline.records) === null || _c === void 0 ? void 0 : _c.length}</b>`,
}),
} }))),
!isMobile && (React__default.createElement(_Record, { records: timeline.records, isCurrent: isCurrent, onTitleClick: onTitleClick, onToggle: onToggle }))),
isMobile && (React__default.createElement(Grid.Col, { span: 12 },
React__default.createElement(_Record, { records: timeline.records, isCurrent: isCurrent, onTitleClick: onTitleClick, onToggle: onToggle }))))));
};
const StyledTimelineBanner = styled.div `
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
border-radius: 8px;
padding: 14px 24px;
gap: 16px;
background: ${theme.colors.teal50};
&[data-gender='girl'] {
background: ${theme.colors.pink50};
}
a {
text-decoration: none;
}
img {
object-fit: contain;
}
${MediaQueries.mbDown} {
padding: 12px;
gap: 12px;
}
`;
const TimelineBanner = (_a) => {
var { content, url, icon, gender, name } = _a, rest = __rest(_a, ["content", "url", "icon", "gender", "name"]);
const { t } = useTranslations();
const { isMobile } = useScreenSize();
return (React__default.createElement(StyledTimelineBanner
// data-theme={siteType}
, Object.assign({ "data-gender": gender }, rest),
React__default.createElement(Stack, { spacing: 8 },
React__default.createElement(Text, { size: "p3", color: theme.colors.gray800 }, content.replace(/{babyName}/g, name)),
url && (React__default.createElement("a", { className: "read-more", href: url, target: "_blank", rel: "noreferrer" },
React__default.createElement(Flex, { align: 'center', gap: 6 },
React__default.createElement(Text, { size: "s4", color: theme.colors.primaryBase, weight: "semiBold" }, t('articlePage.readMore')),
React__default.createElement(ArrowRight, { size: 20, color: theme.colors.primaryBase }))))),
icon && (React__default.createElement(AspectRatio, { ratio: 1, w: isMobile ? 56 : 80, sx: {
flexShrink: 0,
} },
React__default.createElement("img", { alt: "health-tool-icon", src: icon, style: { objectFit: 'contain' }, loading: "lazy" })))));
};
const RecordsByAgeGroup = (_a) => {
// /**
// * This function determines if a given vaccination timeline is current based on the age and vaccination
// * records.
// * @param {BabyVaccinationTimeline} timeline - The `timeline` parameter is an object of type
// * `BabyVaccinationTimeline`, which contains information about a specific vaccination timeline for a
// * baby, including the age at which the vaccination is due, the recurrence of the vaccination, and any
// * records of previous vaccinations for that timeline.
// * @param {number} timelineIndex - The index of the specific vaccination timeline within the array of
// * timelines for a particular schedule.
// * @param {number} scheduleIndex - The index of the current vaccination schedule being checked.
// * @returns The function `getIsCurrent` returns either the `id` of the current schedule or `null`.
// */
// const getIsCurrent = (
// timeline: BabyVaccinationTimeline,
// timelineIndex: number,
// scheduleIndex: number,
// ) => {
// if (age[timeline.recurrence] === timeline.age) {
// if (timeline.records.length === 0) {
// let i = scheduleIndex
// // Loop back whenever timeline has records
// while (
// schedules[i].timelines[timelineIndex].records.length === 0 &&
// i > 0
// ) {
// i--
// }
// return schedules[i].id
// } else {
// return schedules[scheduleIndex].id
// }
// }
// return null
// }
var { schedules, age, onToggle, onTitleClick, gender = Gender.Boy, hideBanner = false, name } = _a, rest = __rest(_a, ["schedules", "age", "onToggle", "onTitleClick", "gender", "hideBanner", "name"]);
// const currentIndex = useMemo(() => {
// let idx = schedules[0].id
// schedules.some((schedule, scheduleIndex) =>
// schedule.timelines.some((timeline, timelineIndex) => {
// if (getIsCurrent(timeline, timelineIndex, scheduleIndex)) {
// idx = getIsCurrent(timeline, timelineIndex, scheduleIndex)
// return true
// }
// }),
// )
// return idx
// }, [schedules])
const getIsCurrent = (timeline) => {
if (timeline.recurrence === 'month') {
return age.year * 12 + age.month === timeline.age;
}
return age[timeline.recurrence] === timeline.age;
};
const shouldHideBanner = useMemo(() => {
return schedules.map((_schedule) => _schedule.timelines.some((_timeline) => hideBanner || _timeline.records.length === 0));
}, [schedules, hideBanner]);
if (!schedules || schedules.length === 0)
return null;
return (React__default.createElement("div", Object.assign({}, rest), schedules.map((schedule, index) => {
var _a;
return (React__default.createElement(React__default.Fragment, null, ((_a = schedule.timelines) === null || _a === void 0 ? void 0 : _a.length) > 0 && (React__default.createElement("div", { key: schedule.id },
schedule.title && !shouldHideBanner[index] && (React__default.createElement(TimelineBanner, { content: schedule.title, gender: gender, icon: gender === Gender.Boy ? schedule.iconBoy : schedule.iconGirl, url: schedule.readMoreUrl, name: name })),
schedule.timelines.map((timeline) => (React__default.createElement(_ScheduleTimeline, { key: timeline.id, timeline: timeline, onTitleClick: onTitleClick, onToggle: onToggle, isCurrent: getIsCurrent(timeline) })))))));
})));
};
// eslint-disable-next-line @typescript-eslint/no-empty-function
const noop = () => { };
const _ConfirmModal = (_a) => {
var { onSubmit, date } = _a, rest = __rest(_a, ["onSubmit", "date"]);
const { t } = useTranslations();
return (React__default.createElement(Modal, Object.assign({ withinPortal: true, zIndex: 500, styles: {
body: {
padding: 32,
},
} }, rest),
React__default.createElement(Box, { sx: { position: 'absolute', top: 15, right: 20 }, onClick: rest.onClose },
React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
React__default.createElement("path", { d: "M5.99 4.99a1 1 0 0 0-.697 1.717L10.586 12l-5.293 5.293a1 1 0 1 0 1.414 1.415L12 13.415l5.293 5.293a1 1 0 1 0 1.414-1.415L13.414 12l5.293-5.293a1 1 0 1 0-1.414-1.414L12 10.586 6.707 5.293a1 1 0 0 0-.717-.302", fill: "#595959" }))),
React__default.createElement(Stack, { spacing: 8, align: "center", ta: "center" },
React__default.createElement("svg", { width: "80", height: "80", viewBox: "0 0 80 80", fill: "none" },
React__default.createElement("path", { d: "M40 73.333c18.41 0 33.333-14.923 33.333-33.333S58.41 6.667 40 6.667 6.667 21.59 6.667 40 21.59 73.333 40 73.333", fill: "#FFB521" }),
React__default.createElement("path", { d: "M39.325 48.609a2.48 2.48 0 0 1-2.48-2.48V29.147a2.48 2.48 0 1 1 4.959 0V46.13a2.48 2.48 0 0 1-2.48 2.479m.001 8.058a2.658 2.658 0 1 0 0-5.316 2.658 2.658 0 0 0 0 5.316", fill: "#fff" })),
React__default.createElement(Heading, { tag: "h4" }, t('babyVaccine.popup.confirm.title')),
React__default.createElement(Text, { size: "p2", color: "gray.6" },
React__default.createElement("span", { dangerouslySetInnerHTML: {
__html: t('babyVaccine.popup.confirm.description', {
date: `<b>${dayjs(date).format('DD/MM/YYYY')}</b>`,
}),
} }))),
React__default.createElement(Flex, { gap: 12, mt: 32, w: "100%" },
React__default.createElement(Button, { variant: "tertiary", type: "button", size: "lg", w: "100%", onClick: rest.onClose }, t('babyVaccine.popup.confirm.close')),
React__default.createElement(Button, { type: "button", size: "lg", w: "100%", onClick: () => onSubmit() }, t('babyVaccine.popup.confirm.ok')))));
};
const StyledImmunization = styled.div `
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
width: 100%;
${MediaQueries.mbDown} {
padding: 0;
}
`;
const StyledDose = styled.div `
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
&[data-id='header'] {
width: 12px;
height: 12px;
cursor: unset;
}
&[data-status='vaccinated'] {
border: 1px solid ${theme.colors.green600};
background: ${theme.colors.green600};
.inner-text {
color: ${theme.colors.white};
}
}
&[data-status='missed'] {
border: 1px solid ${theme.colors.yellow800};
background: ${theme.colors.yellow800};
.inner-text {
color: ${theme.colors.white};
}
}
&[data-status='upcoming'] {
background-color: ${themeColors.neutral[0]};
border: 1px solid ${themeColors.neutral[1]};
}
&[data-status='next'] {
background-color: ${themeColors.blue[6]};
border: 1px solid ${themeColors.blue[6]};
.inner-text {
color: ${theme.colors.white};
}
}
&[data-disabled='true'] {
opacity: 50%;
background-color: ${themeColors.neutral[0]};
border: 1px solid ${themeColors.neutral[1]};
cursor: not-allowed;
.inner-text {
color: ${themeColors.neutral[9]};
}
}
`;
const Dose = (_a) => {
var { status, idx, template, disabled, onClick } = _a, rest = __rest(_a, ["status", "idx", "template", "disabled", "onClick"]);
const shouldDisable = template === 'default' && disabled;
return (React__default.createElement(StyledDose, Object.assign({ onClick: template !== 'default' ? onClick : noop, "data-status": status, "data-id": idx ? idx : 'header', "data-disabled": shouldDisable }, rest),
React__default.createElement(Text, { size: "s4", span: true, className: "inner-text", weight: "semiBold", color: shouldDisable ? themeColors.neutral[9] : themeColors.gray[8] }, idx ? idx : '')));
};
dayjs.extend(customParseFormat);
const _DefaultForm = (_a) => {
var { autoInjected, record, onSubmit: _onSubmit, doses = [], closeModal, birthday } = _a, rest = __rest(_a, ["autoInjected", "record", "onSubmit", "doses", "closeModal", "birthday"]);
const { t } = useTranslations();
const [opened, { open, close }] = useDisclosure(false);
const form = useForm({
initialValues: {
injected: autoInjected || record.status === 'vaccinated',
date: dayjs(record.givenOn, 'DD/MM/YYYY').toDate() || new Date(),
},
});
const onSubmit = (values) => {
if ((!form.isTouched('date') ||
dayjs(values.date).isSame(dayjs(record.givenOn, 'DD/MM/YYYY'), 'd')) &&
!opened) {
open();
return;
}
_onSubmit(record, values);
};
const shouldShowSaveButton = useMemo(() => record.status !== 'vaccinated', [record.status]);
const status = useMemo(() => {
if (form.values.injected) {
// If the user has been vaccinated, set the status to "vaccinated"
return 'vaccinated';
}
else {
// Otherwise, use the existing status from the vaccine record
return record.status;
}
}, [record.status, form.values.injected]);
return (React__default.createElement(React__default.Fragment, null,
React__default.createElement(_ConfirmModal, { opened: opened, onClose: close, onSubmit: () => onSubmit(form.values), date: form.values.date }),
React__default.createElement("form", Object.assign({ onSubmit: form.onSubmit(onSubmit) }, rest),
React__default.createElement(Stack, { spacing: 20 },
React__default.createElement(VaccineCardModal, { vaccineRecord: Object.assign(Object.assign({}, record), { status }), onToggle: (status) => form.setFieldValue('injected', status) }),
React__default.createElement(DatePicker, Object.assign({ label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 }, t('babyVaccine.popup.checkbox.suggestedDate')), disabled: record.status === 'vaccinated', excludeDate: (date) => dayjs(date).isAfter(dayjs().add(7, 'D')) ||
dayjs(date).isBefore(dayjs(birthday, 'YYYY-MM-DD', true), 'D') }, form.getInputProps('date'), { dropdownType: "modal", modalProps: {
centered: true,
styles: {
inner: {
zIndex: 1000,
},
overlay: {
zIndex: 1000,
},
},
} })),
doses.length > 0 && (React__default.createElement(Input.Wrapper, null,
React__default.createElement(Input.Label, null,
React__default.createElement(Text, { size: "s5", weight: "semiBold", color: theme.colors.gray600 }, t('babyVaccine.popup.label.doses'))),
React__default.createElement(Flex, { gap: 4 }, doses.map((item, index) => (React__default.createElement(Dose, { key: index, status: item.status, idx: index + 1, onClick: noop, disabled: Number(record.doseNumber) !== Number(item.doseNumber), template: 'default' })))))),
React__default.createElement(Flex, { gap: 8, sx: {
position: 'absolute',
bottom: 24,
left: 16,
right: 16,
width: 'unset',
[MediaQueries.mbDown]: {
flexDirection: 'column-reverse',
bottom: 16,
},
}, className: "wrapper-action-btn" },
React__default.createElement(Button, { variant: "tertiary", size: "lg", type: "button", fullWidth: true, onClick: closeModal }, t('actionPopover.leaveCommunity.cancel')),
shouldShowSaveButton && (React__default.createElement(Button, { size: "lg", type: "submit", fullWidth: true, disabled: !form.values.injected }, t('babyVaccine.popup.button.submit'))))))));
};
const _Icon = ({ type }) => {
switch (type) {
case 'benefit':
return (React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
React__default.createElement("path", { d: "M11.629 1c2.939.003 5.858.488 8.64 1.436a1.386 1.386 0 0 1 .983 1.44c-.361 3.221-1.497 11.856-2.072 12.798-1.144 1.875-5.229 4.927-6.867 6.108a1.19 1.19 0 0 1-1.374 0c-1.637-1.18-5.718-4.233-6.862-6.108-.576-.942-1.711-9.576-2.072-12.797a1.386 1.386 0 0 1 .983-1.44A26.9 26.9 0 0 1 11.628 1", fill: "#45A4FF" }),
React__default.createElement("path", { d: "M11.629 2.436c2.569.002 5.121.413 7.561 1.218.547.184.656.688.597 1.221-.306 2.73-1.268 10.051-1.757 10.85-1.023 1.677-4.82 4.464-6.032 5.329a.64.64 0 0 1-.746 0c-1.21-.865-5.003-3.652-6.027-5.329-.486-.799-1.449-8.12-1.755-10.85-.06-.532.05-1.037.596-1.22a24.2 24.2 0 0 1 7.563-1.219", fill: "#2D87F3" }),
React__default.createElement("path", { d: "M12.015 8.182h-.781a1.13 1.13 0 0 0-1.13 1.13v.194a.244.244 0 0 1-.243.243h-.194a1.13 1.13 0 0 0-1.129 1.129v.78a1.13 1.13 0 0 0 1.13 1.13h.193a.244.244 0 0 1 .244.243v.194a1.13 1.13 0 0 0 1.129 1.13h.78a1.13 1.13 0 0 0 1.13-1.13v-.195a.244.244 0 0 1 .243-.243h.195a1.13 1.13 0 0 0 1.128-1.13v-.779a1.13 1.13 0 0 0-1.128-1.13h-.195a.244.244 0 0 1-.244-.242v-.194a1.13 1.13 0 0 0-1.129-1.13", fill: "#fff" })));
case 'definition':
return (React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
React__default.createElement("path", { d: "M1.342 23a.34.34 0 0 0 .243-.1l3.584-3.584a.343.343 0 0 0-.485-.486L1.1 22.415a.343.343 0 0 0 .242.585", fill: "#626D7C" }),
React__default.createElement("path", { d: "M9.262 18.591h.002l9.142-9.14-3.853-3.856-9.213 9.21c1.134 1.152 3.922 3.786 3.922 3.786", fill: "#2D87F3" }),
React__default.createElement("path", { d: "m3.817 17.964 2.218 2.219a1.12 1.12 0 0 0 1.58.054l1.647-1.646-3.853-3.856-1.647 1.647a1.12 1.12 0 0 0 .055 1.582", fill: "#BCDEFF" }),
React__default.createElement("path", { d: "m21.322 4.3-1.62-1.62-3.43 3.43 1.62 1.62z", fill: "#2B62CD" }),
React__default.createElement("path", { d: "M9.263 18.934a.343.343 0 0 0 .242-.586L5.65 14.494a.344.344 0 0 0-.484.485l3.854 3.854a.34.34 0 0 0 .243.101", fill: "#BCDEFF" }),
React__default.createElement("path", { d: "M11.386 13.572a.54.54 0 0 0 .385-.16l.035-.037.036.036a.545.545 0 0 0 .77 0l.412-.412a.546.546 0 0 0 0-.77l-.036-.034.036-.036a.545.545 0 0 0 0-.77l-.412-.412a.545.545 0 0 0-.77 0l-.036.035-.036-.036a.546.546 0 0 0-.77 0l-.412.412a.545.545 0 0 0 0 .77l.036.037-.036.035a.545.545 0 0 0 0 .77l.412.412a.54.54 0 0 0 .386.16", fill: "#fff" }),
React__default.createElement("path", { d: "m15.142 4.133 4.727 4.726a.746.746 0 1 1-1.055 1.055l-4.727-4.727a.746.746 0 1 1 1.055-1.054m4.605-2.665 2.785 2.784a.662.662 0 0 1-.936.937L18.81 2.404a.662.662 0 0 1 .936-.936", fill: "#BCDEFF" })));
case 'contraindications':
return (React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
React__default.createElement("path", { d: "M14.62 6.008v12.837a2.405 2.405 0 0 1-2.191 2.426 2.35 2.35 0 0 1-2.51-2.346V6.008z", fill: "#BCDEFF" }),
React__default.createElement("path", { d: "M14.62 7.945v10.98a2.35 2.35 0 1 1-4.701 0V7.945z", fill: "#45A4FF" }),
React__default.createElement("path", { d: "M11.785 10.052H9.92a.358.358 0 0 1 0-.717h1.866a.358.358 0 1 1 0 .717m-.818 1.748H9.919a.358.358 0 1 1 0-.716h1.05a.358.358 0 0 1 0 .717zm.817 1.75H9.92a.358.358 0 0 1 0-.717h1.866a.358.358 0 1 1 0 .717m-.818 1.749H9.919a.358.358 0 1 1 0-.717h1.05a.358.358 0 0 1 0 .717zm0 3.498H9.919a.358.358 0 1 1 0-.717h1.05a.358.358 0 0 1 0 .717zm.817-1.749H9.92a.358.358 0 0 1 0-.717h1.866a.358.358 0 1 1 0 .717", fill: "#2D87F3" }),
React__default.createElement("path", { d: "M14.778 4H9.76a1.063 1.063 0 1 0 0 2.125h5.018a1.063 1.063 0 0 0 0-2.125", fill: "#E3F2FF" }),
React__default.createElement("path", { d: "M12 1.339a10.661 10.661 0 1 0 0 21.322A10.661 10.661 0 0 0 12 1.34m-.492 1.674a8.97 8.97 0 0 1 5.957 1.838.377.377 0 0 1 .038.565L5.416 17.503a.377.377 0 0 1-.565-.038 8.998 8.998 0 0 1 6.657-14.452M12 21a8.96 8.96 0 0 1-5.355-1.766.377.377 0 0 1-.043-.57L18.665 6.603a.376.376 0 0 1 .569.043A9 9 0 0 1 12 21", fill: "#F44D2C" })));
case 'related_articles':
return (React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
React__default.createElement("path", { d: "M16.727 1.211 3.413 3.204a1.43 1.43 0 0 0-1.202 1.624L4.72 21.587c.117.78.844 1.318 1.625 1.201l13.314-1.992a1.43 1.43 0 0 0 1.202-1.625L18.352 2.413a1.43 1.43 0 0 0-1.625-1.202", fill: "#2D87F3" }),
React__default.createElement("path", { d: "m3.224 3.232 13.692-2.049 2.608 17.431-13.691 2.05z", fill: "#fff" }),
React__default.createElement("path", { d: "m10.786 5.379-.472.07a.69.69 0 0 0-.58.786l.017.117a.15.15 0 0 1-.125.17l-.117.017a.69.69 0 0 0-.581.785l.07.473a.69.69 0 0 0 .786.58L9.9 8.36a.15.15 0 0 1 .17.125l.017.117a.69.69 0 0 0 .785.58l.473-.07a.69.69 0 0 0 .58-.785l-.017-.118a.15.15 0 0 1 .125-.17l.118-.017a.69.69 0 0 0 .58-.785l-.07-.472a.69.69 0 0 0-.786-.58l-.118.018a.15.15 0 0 1-.169-.126l-.018-.118a.69.69 0 0 0-.785-.58m5.463 4.494-7.76 1.162a.267.267 0 1 0 .079.528l7.76-1.161a.267.267 0 1 0-.08-.529m.249 1.92L6.77 13.248a.267.267 0 1 0 .079.529l9.726-1.456a.267.267 0 1 0-.079-.528m-.493 2.03-8.984 1.344a.267.267 0 1 0 .079.529l8.984-1.345a.267.267 0 1 0-.079-.528m-.903 2.091-7.833 1.172a.267.267 0 1 0 .08.529l7.831-1.172a.267.267 0 0 0-.079-.529m1.933-.289-.69.103a.267.267 0 0 0 .079.529l.69-.104a.267.267 0 1 0-.08-.528", fill: "#91CAFF" }),
React__default.createElement("path", { d: "m14.211 3.27-7.79 1.165a.96.96 0 0 1-1.09-.806l-.081-.545a.365.365 0 0 1 .307-.414l8.963-1.341a.365.365 0 0 1 .415.306l.081.545a.96.96 0 0 1-.806 1.09z", fill: "#1B3250" })));
default:
return null;
}
};
const _Section = (_a) => {
var { type, title, children } = _a, rest = __rest(_a, ["type", "title", "children"]);
return (React__default.createElement("section", Object.assign({}, rest),
React__default.createElement(Stack, { spacing: 8 },
React__default.createElement(Flex, { gap: 8 },
React__default.createElement(AspectRatio$1, { ratio: 1, w: 24 },
React__default.createElement(_Icon, { type: type })),
React__default.createElement(Text, { size: "s2", weight: "semiBold" }, title)),
children)));
};
const _Detail = (_a) => {
var { details } = _a, rest = __rest(_a, ["details"]);
const { t } = useTranslations();
return (React__default.createElement(Container, Object.assign({ p: 0 }, rest),
React__default.createElement(Stack, { spacing: 24 },
details.detail && (React__default.createElement(_Section, { type: "definition", title: t('babyVaccine.detail.definition') },
React__default.createElement(Text, { size: "p2" },
React__default.createElement("span", { dangerouslySetInnerHTML: { __html: details.detail } })))),
details.benefits && (React__default.createElement(_Section, { type: "benefit", title: t('babyVaccine.detail.benifit') },
React__default.createElement(Text, { size: "p2" },
React__default.createElement("span", { dangerouslySetInnerHTML: { __html: details.benefits } })))),
details.contraindications && (React__default.createElement(_Section, { type: "contraindications", title: t('babyVaccine.detail.contraindication') },
React__default.createElement(Text, { size: "p2" },
React__default.createElement("span", { dangerouslySetInnerHTML: { __html: details.contraindications } })))),
details.link && (React__default.createElement(_Section, { type: "related_articles", title: t('babyVaccine.detail.relatedArticles') },
React__default.createElement(Text, { size: "p2" },
React__default.createElement("span", { dangerouslySetInnerHTML: { __html: details.link } })))))));
};
dayjs.extend(customParseFormat);
const _ImmunizationForm = (_a) => {
var { vaccineDetail, doses = [], onDoseClick } = _a, rest = __rest(_a, ["vaccineDetail", "doses", "onDoseClick"]);
const { t } = useTranslations();
return (React__default.createElement(Stack, Object.assign({ spacing: 20 }, rest),
React__default.createElement(VaccineCardImmunization, { vaccineDetail: Object.assign({}, vaccineDetail), showTopDetail: false }),
doses.length > 0 && (React__default.createElement(Input.Wrapper, null,
React__default.createElement(Input.Label, null,
React__default.createElement(Text, { size: "s5", weight: "semiBold", color: theme.colors.gray600 }, t('babyVaccine.popup.label.doses'))),
React__default.createElement(Flex, { gap: 4 }, doses.map((item, index) => (React__default.createElement(Dose, { key: index, status: item.status, idx: index + 1, onClick: () => {
onDoseClick(item);
}, template: 'immunization' }))))))));
};
const VaccineDetailPopup = (_a) => {
var { currentRecord, vaccineDetail, isDetail, onSubmit: _onSubmit, template = 'default', shouldAutoInjected = true, birthday, className } = _a, rest = __rest(_a, ["currentRecord", "vaccineDetail", "isDetail", "onSubmit", "template", "shouldAutoInjected", "birthday", "className"]);
const { t } = useTranslations();
const { isMobile } = useScreenSize();
const [activeTab, setActiveTab] = useState();
const options = [
{
id: '1',
name: t('babyVaccine.popup.tab.schedule'),
},
{
id: '2',
name: t('babyVaccine.popup.tab.detail'),
},
];
useEffect(() => {
setActiveTab(!isDetail ? '1' : '2');
}, [isDetail]);
const onSubmit = (record, values) => __awaiter(void 0, void 0, void 0, function* () {
yield (_onSubmit === null || _onSubmit === void 0 ? void 0 : _onSubmit(record, values));
if (template === 'default') {
rest.onClose();
}
});
if (template === 'default' && !currentRecord)
return null;
if (template === 'immunization' && !vaccineDetail)
return null;
return (React__default.createElement(Modal, Object.assign({}, rest, { title: React__default.createElement(Text, { size: "s3", weight: "semiBold" }, t('babyVaccine.popup.title')), withCloseButton: true, size: 500, styles: {
content: {
[MediaQueries.mbUp]: { height: 560 },
},
body: {
padding: 0,
[MediaQueries.mbUp]: { height: '100%', position: 'relative' },
},
}, fullScreen: isMobile, zIndex: 400, className: className }),
React__default.createElement(Container, { fluid: true, p: isMobile ? 16 : 24 },
React__default.createElement(Tabs, { value: activeTab, onTabChange: setActiveTab },
React__default.createElement(Flex, { justify: 'space-between' },
React__default.createElement(Tabs.List, { grow: true }, options.map((opt) => (React__default.createElement(Tabs.Tab, { key: opt.id, value: opt.id },
React__default.createElement(Text, { size: "s3", weight: "semiBold", color: "inherit" }, opt.name)))))),
React__default.createElement(Tabs.Panel, { value: "1", pt: 20, className: "vaccine-form-tab" }, vaccineDetail &&
(template === 'default' ? (React__default.createElement(_DefaultForm, { autoInjected: shouldAutoInjected &&
currentRecord.status !== 'vaccinated' &&
!isDetail, record: currentRecord, onSubmit: onSubmit, doses: (vaccineDetail === null || vaccineDetail === void 0 ? void 0 : vaccineDetail.records) || [], closeModa