// Post a Job (employer) + Create Profile (helper) — wizard-style forms
const StepHeader = ({ step, total, titles, subtitle }) => (
{titles.map((t,i) => (
{i < step ? '✓' : i+1}
{t}
{i < total-1 && }
))}
{subtitle &&
{subtitle}
}
);
const Field = ({ label, required, hint, icon, children }) => {
const { t } = window.useI18n();
// Manifest pattern A — inline disc before label. Custom size 44px box /
// 32px icon (between FlatIconDisc's preset md=36 and lg=56) so the icon
// anchors the row without dominating it.
const flatDef = icon && window.FLAT_ICONS && window.FLAT_ICONS[icon];
const discBg = flatDef && window.CAT_BG ? (window.CAT_BG[flatDef.cat] || 'var(--t-bg)') : 'var(--t-bg)';
return (
{children}
{hint &&
{hint}
}
);
};
// ChipPicker: interactive chip-cloud picker. When `category` is one of
// 'language' / 'main' / 'cooking' / 'other' / 'personality' it mirrors the
// SkillsGroup chip styles used on the public detail page (filled coral pills
// for language, ochre pills for cooking, outline + colored disc + skill icon
// for the others). When `category` is omitted it falls back to the original
// trust-color picker style — used for non-skill enum pickers like job type
// or pref nationality.
const ChipPicker = ({ options, value, onChange, multi = true, showFlag = false, category }) => {
const arr = multi ? (value || []) : value;
const toggle = (id) => {
if (!multi) { onChange(id); return; }
if (arr.includes(id)) onChange(arr.filter(x => x !== id));
else onChange([...arr, id]);
};
const c = category && window.SKILL_CAT_COLORS && window.SKILL_CAT_COLORS[category];
return (
{options.map(o => {
const id = o.id || o;
const label = (o.id && window.pickLocalised && window.pickLocalised(o, 'label')) || o.label || o;
const active = multi ? arr.includes(id) : value === id;
// Skill chips — outline pill + 32×32 disc + icon, shared across
// language / main / cooking / other / personality. Disc bg comes
// from the icon's own CAT_BG family when active so each row reads
// as one colour family; neutral when inactive. Languages have no
// flat-icon, so the flag emoji sits inside the disc instead.
if (category === 'language' || category === 'main' || category === 'cooking' ||
category === 'other' || category === 'personality') {
const flatDef = window.FLAT_ICONS && window.FLAT_ICONS[id];
const discBg = active
? (flatDef && window.CAT_BG ? (window.CAT_BG[flatDef.cat] || c.bg) : c.bg)
: 'var(--t-bg)';
const isLang = category === 'language';
return (
);
}
// Default trust-color picker (non-skill enums like job type, gender).
return (
);
})}
);
};
// Rich-text editor (contentEditable) with B / I / bullet / number list
const RichTextEditor = ({ value, onChange, placeholder = '' }) => {
const ref = React.useRef(null);
// Set innerHTML only once on mount — then let contentEditable drive it
React.useEffect(() => {
if (ref.current && ref.current.innerHTML !== value) {
ref.current.innerHTML = value || '';
}
// eslint-disable-next-line
}, []);
const exec = (cmd, arg) => {
document.execCommand(cmd, false, arg);
if (ref.current) onChange(ref.current.innerHTML);
};
const Tool = ({ icon, cmd, arg, title }) => (
);
return (
);
};
// Discrete 5-step slider for the post-a-job "flexibility" picker. Snaps
// between fix / 2w / 1m / 2m / 3m. Single thumb, with the active label shown
// above the track. Re-declares the slider thumb CSS locally because RangeSlider
// (the original owner of `.rs-thumb`) lives on a different step and its
// component-scoped
);
};
// Make limits + hint reachable from other modules without re-defining.
window.HM_VIDEO_LIMITS = CANDIDATE_VIDEO_LIMITS;
// Other modules should call window.HM_VIDEO_HINT_FN() at render time so they
// re-read the current language when the user switches.
window.HM_VIDEO_HINT_FN = CANDIDATE_VIDEO_HINT_FN;
// ---- Work experience entry ----
// MVP scope: helpers no longer upload reference letter files. We keep the
// per-entry hasReference Yes/No toggle (admin work history table mirrors it).
// referenceFile field is removed; if file uploads come back later, restore the
// schema field + the upload UI block in WorkExperienceEntry below.
const newWorkExperience = () => ({
position: 'Domestic Helper',
country: 'Hong Kong',
startYear: '',
startMonth: '',
endYear: '',
endMonth: '',
current: false,
duties: [],
hasReference: false,
});
const DUTY_OPTIONS = [
'Cooking', 'Elderly Care', 'Marketing', 'Housekeeping', 'Pet Care',
'Driving', 'Tutoring', 'Baby Care', 'Gardening', 'Kids Care', 'Car Washing',
];
const WorkExperienceEntry = ({ entry, index, onChange, onRemove, canRemove }) => {
const { t } = window.useI18n();
const yearOpts = []; for (let y = new Date().getFullYear(); y >= 1985; y--) yearOpts.push(y);
const monthOpts = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
const u = (k, v) => onChange({...entry, [k]: v});
return (