@hhgtech/hhg-components/build/vaccination.js

Hello Health Group common components

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('./tslib.es6-af09a0ba.js');
var React = require('react');
var core = require('@mantine/core');
var index$5 = require('./index-3424862e.js');
require('@mantine/dates');
require('./index-ec32050c.js');
var index$7 = require('./index-0a047edc.js');
require('./index-9301f298.js');
var index$3 = require('./index-4d838fd2.js');
var index$2 = require('./index-d4ad3f79.js');
var index$1 = require('./index-515469d0.js');
var miscTheme = require('./miscTheme.js');
require('./index-04864074.js');
require('./index.styles-5f6a7ac0.js');
var index = require('./index-2b476eb9.js');
var hooks = require('@mantine/hooks');
var utils = require('./utils-5e3a8440.js');
require('./index-a985d53b.js');
var styled = require('@emotion/styled');
var index$4 = require('./index-3ab5a07b.js');
require('./translationsContext-4698cb34.js');
var other = require('@hhgtech/icons/other');
var index$6 = require('./index-6b44ec2b.js');
var index$8 = require('./index-47ec78f0.js');
var form = require('@mantine/form');
var dayjs = require('dayjs');
var customParseFormat = require('dayjs/plugin/customParseFormat');
var index$a = require('./index-2558f624.js');
var index$9 = require('./index-e13a0e39.js');
require('@mantine/carousel');
require('./shared-201fc49c.js');
require('classnames');
require('uuid');
require('./useUniqueId-88b26792.js');
require('./constantsSite.js');
require('./Locale-eb0da538.js');
require('@emotion/react');
require('@hhgtech/icons/core');
require('date-fns/locale');
require('./constantsDomainLocales.js');
require('./constantsRiskScreener.js');
require('./constantsIsProduction.js');
require('@mantine/notifications');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);
var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
var customParseFormat__default = /*#__PURE__*/_interopDefault(customParseFormat);

const StyledVaccineCard = styled__default["default"].div `
  position: relative;
  padding: 16px;
  min-height: 110px;
  background: ${miscTheme.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: ${miscTheme.theme.colors.primaryBase};
    &[data-template='modal'] {
      background: ${miscTheme.theme.colors.primary50};
    }
  }

  &[data-status='vaccinated'] {
    border-color: ${miscTheme.theme.colors.green600};
    &[data-template='modal'] {
      background: ${miscTheme.theme.colors.green50};
    }
  }

  &[data-status='missed'] {
    border-color: ${miscTheme.theme.colors.yellow800};
    &[data-template='modal'] {
      background: ${miscTheme.theme.colors.yellow50};
    }
  }

  &[data-status='upcoming'] {
    border-color: ${miscTheme.theme.colors.neutral300};
  }

  ${utils.MediaQueries.mbDown} {
    padding: 12px;
    gap: 8px;
  }
`;
const StyledInformationWrapper = styled__default["default"].div `
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  width: 100%;

  .dot {
    height: 5px;
    width: 5px;
    background-color: ${miscTheme.theme.colors.gray300};
    border-radius: 50%;
    display: flex;
    align-self: center;
  }
`;

const _Immunization = (_a) => {
    var { vaccineDetail, isCurrent } = _a, rest = tslib_es6.__rest(_a, ["vaccineDetail", "isCurrent"]);
    const { t } = index.useTranslations();
    const { name, antigen, optional } = vaccineDetail;
    return (React__default["default"].createElement(StyledVaccineCard, Object.assign({}, rest, { "data-template": "modal", "data-status": isCurrent ? 'next' : status }),
        React__default["default"].createElement(core.Stack, { spacing: 12 },
            React__default["default"].createElement(core.Stack, { spacing: 4 },
                React__default["default"].createElement(index$1.Button, { variant: "ghost", styles: {
                        root: {
                            padding: 0,
                            height: 'initial',
                            '&:hover:hover': {
                                backgroundColor: 'transparent',
                            },
                        },
                        inner: {
                            padding: 0,
                            justifyContent: 'left',
                        },
                    } },
                    React__default["default"].createElement(index$2.Text, { size: "s3", color: miscTheme.theme.colors.gray800, weight: "semiBold" }, name)),
                React__default["default"].createElement(core.Flex, { gap: 4, align: 'center' },
                    antigen && (React__default["default"].createElement(index$2.Text, { size: "n1", color: index$3.themeColors.gray[6] },
                        t('babyVaccine.timeline.antigen'),
                        "\u00A0",
                        React__default["default"].createElement(index$2.Text, { size: "s5", weight: "semiBold", as: "span" }, antigen))),
                    React__default["default"].createElement(core.Badge, { px: 8, py: 1, radius: 'xl', sx: {
                            height: 'initial',
                            border: `1px solid ${optional ? miscTheme.theme.colors.neutral100 : 'transparent'}`,
                        }, bg: optional ? miscTheme.theme.colors.white : miscTheme.theme.colors.red50 },
                        React__default["default"].createElement(index$2.Text, { size: "n1", color: optional ? miscTheme.theme.colors.gray800 : miscTheme.theme.colors.red800, tt: 'capitalize' }, optional
                            ? t('babyVaccine.vaccineInfo.optional')
                            : t('babyVaccine.vaccineInfo.mandatory'))))))));
};

const _VaccineStatus = ({ checked, onToggle: _onToggle, }) => {
    const { t } = index.useTranslations();
    const onToggle = (event) => {
        _onToggle === null || _onToggle === void 0 ? void 0 : _onToggle(event.currentTarget.checked);
    };
    return (React__default["default"].createElement(index$4.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["default"].createElement(other.Vaccinated, null);
        case 'missed':
            return React__default["default"].createElement(other.Missed, null);
        case 'all':
            return null;
        case 'next':
            return React__default["default"].createElement(other.Current, null);
        default:
            return isCurrent ? React__default["default"].createElement(other.Current, null) : React__default["default"].createElement(other.Upcoming, null);
    }
};

const MAPPED_STATUS = {
    vaccinated: {
        backgroundColor: index$3.themeColors.green[0],
        borderColor: index$3.themeColors.green[2],
        color: index$3.themeColors.green[7],
    },
    missed: {
        backgroundColor: index$3.themeColors.yellow[0],
        borderColor: index$3.themeColors.yellow[2],
        color: index$3.themeColors.yellow[9],
    },
    upcoming: {
        backgroundColor: index$3.themeColors.neutral[0],
        borderColor: index$3.themeColors.neutral[1],
        color: index$3.themeColors.gray[8],
    },
    next: {
        backgroundColor: index$3.themeColors.blue[0],
        borderColor: 'transparent',
        color: index$3.themeColors.blue[6],
    },
    all: {
        backgroundColor: index$3.themeColors.blue[0],
        borderColor: 'transparent',
        color: index$3.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 = tslib_es6.__rest(_a, ["status", "sx", "content"]);
    return (React__default["default"].createElement(core.Badge, Object.assign({ leftSection: status !== 'all' && (React__default["default"].createElement(index$5.AspectRatio, { ratio: 1, w: 18 },
            React__default["default"].createElement(_CardIcon, { status: status }))), px: 8, py: 3, radius: 4, sx: Object.assign(Object.assign({ height: 'initial', backgroundColor: index$3.themeColors.blue[0], borderColor: index$3.themeColors.blue[2], color: index$3.themeColors.blue[7] }, MAPPED_STATUS[status]), sx) }, rest),
        React__default["default"].createElement(index$2.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 = tslib_es6.__rest(_a, ["vaccineRecord", "isCurrent", "onToggle", "showTopDetail"]);
    const { t } = index.useTranslations();
    const { status, vaccineOptional, vaccineName, doseNumber, totalDoses, vaccineAntigen, } = vaccineRecord;
    return (React__default["default"].createElement(StyledVaccineCard, Object.assign({}, rest, { "data-template": "modal", "data-status": isCurrent ? 'next' : status }),
        React__default["default"].createElement(core.Stack, { spacing: 12 },
            showTopDetail && (React__default["default"].createElement(core.Flex, { align: "center", justify: "space-between" },
                React__default["default"].createElement(_Badge, { status: status, content: t(`babyVaccine.status.${status}`) }),
                React__default["default"].createElement(_VaccineStatus, { checked: status === 'vaccinated', onToggle: (status) => onToggle(status, vaccineRecord) }))),
            React__default["default"].createElement(core.Stack, { spacing: 4 },
                React__default["default"].createElement(index$1.Button, { variant: "ghost", styles: {
                        root: {
                            padding: 0,
                            height: 'initial',
                            '&:hover:hover': {
                                backgroundColor: 'transparent',
                            },
                        },
                        inner: {
                            padding: 0,
                            justifyContent: 'left',
                        },
                    } },
                    React__default["default"].createElement(index$2.Text, { size: "s3", color: miscTheme.theme.colors.gray800, weight: "semiBold" }, vaccineName)),
                React__default["default"].createElement(core.Flex, { gap: 4, align: 'center' },
                    vaccineAntigen && (React__default["default"].createElement(index$2.Text, { size: "n1", color: index$3.themeColors.gray[6] },
                        t('babyVaccine.timeline.antigen'),
                        "\u00A0",
                        React__default["default"].createElement(index$2.Text, { size: "s5", weight: "semiBold", as: "span" }, vaccineAntigen))),
                    React__default["default"].createElement(core.Badge, { px: 8, py: 1, radius: 'xl', sx: {
                            height: 'initial',
                            border: `1px solid ${vaccineOptional ? miscTheme.theme.colors.neutral100 : 'transparent'}`,
                        }, bg: vaccineOptional ? miscTheme.theme.colors.white : miscTheme.theme.colors.red50 },
                        React__default["default"].createElement(index$2.Text, { size: "n1", color: vaccineOptional ? miscTheme.theme.colors.gray800 : miscTheme.theme.colors.red800, tt: 'capitalize' }, vaccineOptional
                            ? t('babyVaccine.vaccineInfo.optional')
                            : t('babyVaccine.vaccineInfo.mandatory')))),
                React__default["default"].createElement(index$2.Text, { size: "n1", color: miscTheme.theme.colors.gray600 },
                    React__default["default"].createElement("span", { dangerouslySetInnerHTML: {
                            __html: t('babyVaccine.vaccineInfo.dose', {
                                ordinal: `<b>${doseNumber}</b>`,
                                total: totalDoses,
                            }),
                        } }))))));
};

const _Timeline = (_a) => {
    var { vaccineRecord, onToggle, onTitleClick } = _a, rest = tslib_es6.__rest(_a, ["vaccineRecord", "onToggle", "onTitleClick"]);
    const { t } = index.useTranslations();
    const { status, vaccineOptional, vaccineName, doseNumber, totalDoses, givenOn, vaccineAntigen, } = vaccineRecord;
    return (React__default["default"].createElement(StyledVaccineCard, Object.assign({}, rest, { "data-status": status }),
        React__default["default"].createElement(core.Stack, { spacing: 12 },
            React__default["default"].createElement(core.Flex, { align: "center", justify: "space-between" },
                React__default["default"].createElement(_Badge, { status: status, content: t(`babyVaccine.status.${status}`) }),
                React__default["default"].createElement(_VaccineStatus, { checked: status === 'vaccinated', onToggle: (status) => onToggle(status, vaccineRecord) })),
            React__default["default"].createElement(core.Stack, { spacing: 4 },
                React__default["default"].createElement("div", { onClick: () => onTitleClick(vaccineRecord) },
                    React__default["default"].createElement(index$2.Text, { size: "s3", color: miscTheme.theme.colors.gray800, weight: "semiBold", sx: { cursor: 'pointer' } }, vaccineName)),
                React__default["default"].createElement(core.Flex, { gap: 4, align: 'center' },
                    vaccineAntigen && (React__default["default"].createElement(index$2.Text, { size: "n1", color: index$3.themeColors.gray[6] },
                        t('babyVaccine.timeline.antigen'),
                        "\u00A0",
                        React__default["default"].createElement(index$2.Text, { size: "s5", weight: "semiBold", as: "span" }, vaccineAntigen))),
                    React__default["default"].createElement(core.Badge, { px: 8, py: 1, radius: 'xl', sx: {
                            height: 'initial',
                            border: `1px solid ${vaccineOptional ? miscTheme.theme.colors.neutral100 : 'transparent'}`,
                        }, bg: vaccineOptional ? miscTheme.theme.colors.white : miscTheme.theme.colors.red50 },
                        React__default["default"].createElement(index$2.Text, { size: "n1", color: vaccineOptional ? miscTheme.theme.colors.gray800 : miscTheme.theme.colors.red800, tt: 'capitalize' }, vaccineOptional
                            ? t('babyVaccine.vaccineInfo.optional')
                            : t('babyVaccine.vaccineInfo.mandatory')))),
                React__default["default"].createElement(StyledInformationWrapper, null,
                    React__default["default"].createElement(index$2.Text, { size: "n1", color: miscTheme.theme.colors.gray600 },
                        React__default["default"].createElement("span", { dangerouslySetInnerHTML: {
                                __html: t('babyVaccine.vaccineInfo.dose', {
                                    ordinal: `<b>${doseNumber}</b>`,
                                    total: totalDoses,
                                }),
                            } })),
                    React__default["default"].createElement("span", { className: "dot" }),
                    React__default["default"].createElement(index$2.Text, { size: "n1", color: miscTheme.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 = tslib_es6.__rest(_a, ["vaccineRecord", "isCurrent", "onToggle"]);
        const themeProps = {
            vaccineRecord,
            isCurrent,
            onToggle,
        };
        // props comes afterwards so the can override the default ones.
        return React__default["default"].createElement(WrappedComponent, Object.assign({}, themeProps, rest));
    };
    ComponentWithVaccineCard.displayName = `withVaccineCard(${displayName})`;
    return ComponentWithVaccineCard;
}
const VaccineCardTimeline = React__default["default"].memo(withVaccineCard(_Timeline));
const VaccineCardModal = React__default["default"].memo(withVaccineCard(_Modal));
const VaccineCardImmunization = React__default["default"].memo(withVaccineCard(_Immunization));

const StyledCurrentLineWrapper = styled__default["default"].div `
  flex-shrink: 1;
  display: flex;
  align-items: center;
  width: 100%;
  height: 42px;
  .line {
    flex-grow: 1;
    height: 1px;
    background: ${miscTheme.theme.colors.neutral200};
  }

  .dot {
    height: 8px;
    width: 8px;
    background-color: ${miscTheme.theme.colors.neutral200};
    border-radius: 50%;
    display: flex;
    align-self: center;
  }

  &[data-is-current='true'] {
    .line {
      background-color: ${miscTheme.theme.colors.primaryBase};
    }
    .dot {
      background-color: ${miscTheme.theme.colors.primaryBase};
    }
  }
  ${utils.MediaQueries.mbDown} {
    height: 22px;
  }
`;

const _Record = (_a) => {
    var { records, isCurrent, onTitleClick, onToggle } = _a, rest = tslib_es6.__rest(_a, ["records", "isCurrent", "onTitleClick", "onToggle"]);
    return (React__default["default"].createElement(core.Stack, Object.assign({ spacing: 8 }, rest), records.map((item, index) => (React__default["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 = tslib_es6.__rest(_a, ["timeline", "onToggle", "onTitleClick", "isCurrent"]);
    const { t } = index.useTranslations();
    const { isMobile } = index$6.useScreenSize();
    const isCurrent = React.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["default"].createElement("div", Object.assign({}, rest),
        React__default["default"].createElement(core.Grid, { key: timeline.id, gutter: 16, py: 16 },
            React__default["default"].createElement(core.Grid.Col, { span: "content" },
                React__default["default"].createElement(index$2.Text, { size: "s4", color: isCurrent ? miscTheme.theme.colors.primaryBase : miscTheme.theme.colors.gray800, weight: "semiBold", sx: {
                        height: 42,
                        width: 100,
                        display: 'flex',
                        alignItems: 'center',
                        [utils.MediaQueries.mbDown]: {
                            height: 22,
                        },
                    } }, generateTimeLineName(timeline, t))),
            React__default["default"].createElement(core.Grid.Col, { span: "auto" },
                React__default["default"].createElement(StyledCurrentLineWrapper, { "data-is-current": isCurrent },
                    React__default["default"].createElement("span", { className: "dot" }),
                    React__default["default"].createElement("div", { className: "line" }),
                    React__default["default"].createElement(index$2.Text, { size: "n1", ml: 16 },
                        React__default["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["default"].createElement(_Record, { records: timeline.records, isCurrent: isCurrent, onTitleClick: onTitleClick, onToggle: onToggle }))),
            isMobile && (React__default["default"].createElement(core.Grid.Col, { span: 12 },
                React__default["default"].createElement(_Record, { records: timeline.records, isCurrent: isCurrent, onTitleClick: onTitleClick, onToggle: onToggle }))))));
};

const StyledTimelineBanner = styled__default["default"].div `
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  border-radius: 8px;
  padding: 14px 24px;
  gap: 16px;

  background: ${miscTheme.theme.colors.teal50};
  &[data-gender='girl'] {
    background: ${miscTheme.theme.colors.pink50};
  }

  a {
    text-decoration: none;
  }
  img {
    object-fit: contain;
  }

  ${utils.MediaQueries.mbDown} {
    padding: 12px;
    gap: 12px;
  }
`;

const TimelineBanner = (_a) => {
    var { content, url, icon, gender, name } = _a, rest = tslib_es6.__rest(_a, ["content", "url", "icon", "gender", "name"]);
    const { t } = index.useTranslations();
    const { isMobile } = index$6.useScreenSize();
    return (React__default["default"].createElement(StyledTimelineBanner
    // data-theme={siteType}
    , Object.assign({ "data-gender": gender }, rest),
        React__default["default"].createElement(core.Stack, { spacing: 8 },
            React__default["default"].createElement(index$2.Text, { size: "p3", color: miscTheme.theme.colors.gray800 }, content.replace(/{babyName}/g, name)),
            url && (React__default["default"].createElement("a", { className: "read-more", href: url, target: "_blank", rel: "noreferrer" },
                React__default["default"].createElement(core.Flex, { align: 'center', gap: 6 },
                    React__default["default"].createElement(index$2.Text, { size: "s4", color: miscTheme.theme.colors.primaryBase, weight: "semiBold" }, t('articlePage.readMore')),
                    React__default["default"].createElement(other.ArrowRight, { size: 20, color: miscTheme.theme.colors.primaryBase }))))),
        icon && (React__default["default"].createElement(index$5.AspectRatio, { ratio: 1, w: isMobile ? 56 : 80, sx: {
                flexShrink: 0,
            } },
            React__default["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 = index$7.Gender.Boy, hideBanner = false, name } = _a, rest = tslib_es6.__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 = React.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["default"].createElement("div", Object.assign({}, rest), schedules.map((schedule, index) => {
        var _a;
        return (React__default["default"].createElement(React__default["default"].Fragment, null, ((_a = schedule.timelines) === null || _a === void 0 ? void 0 : _a.length) > 0 && (React__default["default"].createElement("div", { key: schedule.id },
            schedule.title && !shouldHideBanner[index] && (React__default["default"].createElement(TimelineBanner, { content: schedule.title, gender: gender, icon: gender === index$7.Gender.Boy ? schedule.iconBoy : schedule.iconGirl, url: schedule.readMoreUrl, name: name })),
            schedule.timelines.map((timeline) => (React__default["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 = tslib_es6.__rest(_a, ["onSubmit", "date"]);
    const { t } = index.useTranslations();
    return (React__default["default"].createElement(index$8.Modal, Object.assign({ withinPortal: true, zIndex: 500, styles: {
            body: {
                padding: 32,
            },
        } }, rest),
        React__default["default"].createElement(core.Box, { sx: { position: 'absolute', top: 15, right: 20 }, onClick: rest.onClose },
            React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
                React__default["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["default"].createElement(core.Stack, { spacing: 8, align: "center", ta: "center" },
            React__default["default"].createElement("svg", { width: "80", height: "80", viewBox: "0 0 80 80", fill: "none" },
                React__default["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["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["default"].createElement(index$9.Heading, { tag: "h4" }, t('babyVaccine.popup.confirm.title')),
            React__default["default"].createElement(index$2.Text, { size: "p2", color: "gray.6" },
                React__default["default"].createElement("span", { dangerouslySetInnerHTML: {
                        __html: t('babyVaccine.popup.confirm.description', {
                            date: `<b>${dayjs__default["default"](date).format('DD/MM/YYYY')}</b>`,
                        }),
                    } }))),
        React__default["default"].createElement(core.Flex, { gap: 12, mt: 32, w: "100%" },
            React__default["default"].createElement(index$1.Button, { variant: "tertiary", type: "button", size: "lg", w: "100%", onClick: rest.onClose }, t('babyVaccine.popup.confirm.close')),
            React__default["default"].createElement(index$1.Button, { type: "button", size: "lg", w: "100%", onClick: () => onSubmit() }, t('babyVaccine.popup.confirm.ok')))));
};

const StyledImmunization = styled__default["default"].div `
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  ${utils.MediaQueries.mbDown} {
    padding: 0;
  }
`;
const StyledDose = styled__default["default"].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 ${miscTheme.theme.colors.green600};
    background: ${miscTheme.theme.colors.green600};
    .inner-text {
      color: ${miscTheme.theme.colors.white};
    }
  }

  &[data-status='missed'] {
    border: 1px solid ${miscTheme.theme.colors.yellow800};
    background: ${miscTheme.theme.colors.yellow800};
    .inner-text {
      color: ${miscTheme.theme.colors.white};
    }
  }
  &[data-status='upcoming'] {
    background-color: ${index$3.themeColors.neutral[0]};
    border: 1px solid ${index$3.themeColors.neutral[1]};
  }
  &[data-status='next'] {
    background-color: ${index$3.themeColors.blue[6]};
    border: 1px solid ${index$3.themeColors.blue[6]};
    .inner-text {
      color: ${miscTheme.theme.colors.white};
    }
  }
  &[data-disabled='true'] {
    opacity: 50%;
    background-color: ${index$3.themeColors.neutral[0]};
    border: 1px solid ${index$3.themeColors.neutral[1]};
    cursor: not-allowed;

    .inner-text {
      color: ${index$3.themeColors.neutral[9]};
    }
  }
`;

const Dose = (_a) => {
    var { status, idx, template, disabled, onClick } = _a, rest = tslib_es6.__rest(_a, ["status", "idx", "template", "disabled", "onClick"]);
    const shouldDisable = template === 'default' && disabled;
    return (React__default["default"].createElement(StyledDose, Object.assign({ onClick: template !== 'default' ? onClick : noop, "data-status": status, "data-id": idx ? idx : 'header', "data-disabled": shouldDisable }, rest),
        React__default["default"].createElement(index$2.Text, { size: "s4", span: true, className: "inner-text", weight: "semiBold", color: shouldDisable ? index$3.themeColors.neutral[9] : index$3.themeColors.gray[8] }, idx ? idx : '')));
};

dayjs__default["default"].extend(customParseFormat__default["default"]);
const _DefaultForm = (_a) => {
    var { autoInjected, record, onSubmit: _onSubmit, doses = [], closeModal, birthday } = _a, rest = tslib_es6.__rest(_a, ["autoInjected", "record", "onSubmit", "doses", "closeModal", "birthday"]);
    const { t } = index.useTranslations();
    const [opened, { open, close }] = hooks.useDisclosure(false);
    const form$1 = form.useForm({
        initialValues: {
            injected: autoInjected || record.status === 'vaccinated',
            date: dayjs__default["default"](record.givenOn, 'DD/MM/YYYY').toDate() || new Date(),
        },
    });
    const onSubmit = (values) => {
        if ((!form$1.isTouched('date') ||
            dayjs__default["default"](values.date).isSame(dayjs__default["default"](record.givenOn, 'DD/MM/YYYY'), 'd')) &&
            !opened) {
            open();
            return;
        }
        _onSubmit(record, values);
    };
    const shouldShowSaveButton = React.useMemo(() => record.status !== 'vaccinated', [record.status]);
    const status = React.useMemo(() => {
        if (form$1.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$1.values.injected]);
    return (React__default["default"].createElement(React__default["default"].Fragment, null,
        React__default["default"].createElement(_ConfirmModal, { opened: opened, onClose: close, onSubmit: () => onSubmit(form$1.values), date: form$1.values.date }),
        React__default["default"].createElement("form", Object.assign({ onSubmit: form$1.onSubmit(onSubmit) }, rest),
            React__default["default"].createElement(core.Stack, { spacing: 20 },
                React__default["default"].createElement(VaccineCardModal, { vaccineRecord: Object.assign(Object.assign({}, record), { status }), onToggle: (status) => form$1.setFieldValue('injected', status) }),
                React__default["default"].createElement(index$a.DatePicker, Object.assign({ label: React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray600 }, t('babyVaccine.popup.checkbox.suggestedDate')), disabled: record.status === 'vaccinated', excludeDate: (date) => dayjs__default["default"](date).isAfter(dayjs__default["default"]().add(7, 'D')) ||
                        dayjs__default["default"](date).isBefore(dayjs__default["default"](birthday, 'YYYY-MM-DD', true), 'D') }, form$1.getInputProps('date'), { dropdownType: "modal", modalProps: {
                        centered: true,
                        styles: {
                            inner: {
                                zIndex: 1000,
                            },
                            overlay: {
                                zIndex: 1000,
                            },
                        },
                    } })),
                doses.length > 0 && (React__default["default"].createElement(core.Input.Wrapper, null,
                    React__default["default"].createElement(core.Input.Label, null,
                        React__default["default"].createElement(index$2.Text, { size: "s5", weight: "semiBold", color: miscTheme.theme.colors.gray600 }, t('babyVaccine.popup.label.doses'))),
                    React__default["default"].createElement(core.Flex, { gap: 4 }, doses.map((item, index) => (React__default["default"].createElement(Dose, { key: index, status: item.status, idx: index + 1, onClick: noop, disabled: Number(record.doseNumber) !== Number(item.doseNumber), template: 'default' })))))),
                React__default["default"].createElement(core.Flex, { gap: 8, sx: {
                        position: 'absolute',
                        bottom: 24,
                        left: 16,
                        right: 16,
                        width: 'unset',
                        [utils.MediaQueries.mbDown]: {
                            flexDirection: 'column-reverse',
                            bottom: 16,
                        },
                    }, className: "wrapper-action-btn" },
                    React__default["default"].createElement(index$1.Button, { variant: "tertiary", size: "lg", type: "button", fullWidth: true, onClick: closeModal }, t('actionPopover.leaveCommunity.cancel')),
                    shouldShowSaveButton && (React__default["default"].createElement(index$1.Button, { size: "lg", type: "submit", fullWidth: true, disabled: !form$1.values.injected }, t('babyVaccine.popup.button.submit'))))))));
};

const _Icon = ({ type }) => {
    switch (type) {
        case 'benefit':
            return (React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
                React__default["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["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["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["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
                React__default["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["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["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["default"].createElement("path", { d: "m21.322 4.3-1.62-1.62-3.43 3.43 1.62 1.62z", fill: "#2B62CD" }),
                React__default["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["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["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["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
                React__default["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["default"].createElement("path", { d: "M14.62 7.945v10.98a2.35 2.35 0 1 1-4.701 0V7.945z", fill: "#45A4FF" }),
                React__default["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["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["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["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
                React__default["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["default"].createElement("path", { d: "m3.224 3.232 13.692-2.049 2.608 17.431-13.691 2.05z", fill: "#fff" }),
                React__default["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["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 = tslib_es6.__rest(_a, ["type", "title", "children"]);
    return (React__default["default"].createElement("section", Object.assign({}, rest),
        React__default["default"].createElement(core.Stack, { spacing: 8 },
            React__default["default"].createElement(core.Flex, { gap: 8 },
                React__default["default"].createElement(core.AspectRatio, { ratio: 1, w: 24 },
                    React__default["default"].createElement(_Icon, { type: type })),
                React__default["default"].createElement(index$2.Text, { size: "s2", weight: "semiBold" }, title)),
            children)));
};
const _Detail = (_a) => {
    var { details } = _a, rest = tslib_es6.__rest(_a, ["details"]);
    const { t } = index.useTranslations();
    return (React__default["default"].createElement(core.Container, Object.assign({ p: 0 }, rest),
        React__default["default"].createElement(core.Stack, { spacing: 24 },
            details.detail && (React__default["default"].createElement(_Section, { type: "definition", title: t('babyVaccine.detail.definition') },
                React__default["default"].createElement(index$2.Text, { size: "p2" },
                    React__default["default"].createElement("span", { dangerouslySetInnerHTML: { __html: details.detail } })))),
            details.benefits && (React__default["default"].createElement(_Section, { type: "benefit", title: t('babyVaccine.detail.benifit') },
                React__default["default"].createElement(index$2.Text, { size: "p2" },
                    React__default["default"].createElement("span", { dangerouslySetInnerHTML: { __html: details.benefits } })))),
            details.contraindications && (React__default["default"].createElement(_Section, { type: "contraindications", title: t('babyVaccine.detail.contraindication') },
                React__default["default"].createElement(index$2.Text, { size: "p2" },
                    React__default["default"].createElement("span", { dangerouslySetInnerHTML: { __html: details.contraindications } })))),
            details.link && (React__default["default"].createElement(_Section, { type: "related_articles", title: t('babyVaccine.detail.relatedArticles') },
                React__default["default"].createElement(index$2.Text, { size: "p2" },
                    React__default["default"].createElement("span", { dangerouslySetInnerHTML: { __html: details.link } })))))));
};