@hhgtech/hhg-components
Version:
Hello Health Group common components
494 lines (465 loc) • 34.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var index$4 = require('./index-ec32050c.js');
var index$3 = require('./index-3424862e.js');
require('@mantine/core');
require('@mantine/dates');
require('./index-0a047edc.js');
var index$2 = require('./index-9301f298.js');
require('./index-4d838fd2.js');
var index$1 = require('./index-d4ad3f79.js');
require('./index-515469d0.js');
require('./index-04864074.js');
require('./index.styles-5f6a7ac0.js');
var index = require('./index-2b476eb9.js');
require('@mantine/hooks');
require('./utils-5e3a8440.js');
require('./index-a985d53b.js');
var ChevronDown = require('./ChevronDown-df80ec34.js');
var normalizeLink = require('./normalizeLink-90691beb.js');
var react = require('@emotion/react');
var styled = require('@emotion/styled');
var miscTheme = require('./miscTheme.js');
require('./translationsContext-4698cb34.js');
require('date-fns/locale');
require('./constantsSite.js');
require('./Locale-eb0da538.js');
require('./constantsDomainLocales.js');
require('./constantsRiskScreener.js');
require('./constantsIsProduction.js');
require('./tslib.es6-af09a0ba.js');
require('@hhgtech/icons/other');
require('./index-6b44ec2b.js');
require('@mantine/carousel');
require('./shared-201fc49c.js');
require('classnames');
require('uuid');
require('./useUniqueId-88b26792.js');
require('@hhgtech/icons/core');
require('dayjs');
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);
const NavBookingIcon = (props) => (React__default["default"].createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
React__default["default"].createElement("path", { d: "M2.5 6.5a3.2 3.2 0 0 1 3.2-3.2h7.9a3.2 3.2 0 0 1 3.19 3.2v4.72a3.2 3.2 0 0 1-3.2 3.2H5.7a3.2 3.2 0 0 1-3.19-3.2V6.49Z", fill: "#E3F2FF" }),
React__default["default"].createElement("path", { d: "M2.5 5.68A2.38 2.38 0 0 1 4.88 3.3h9.52a2.38 2.38 0 0 1 2.39 2.38z", fill: "#2D87F3" }),
React__default["default"].createElement("path", { d: "M13.6 2.5h-.03c-.36 0-.65.3-.65.65V4.2c0 .36.3.65.65.65h.03c.36 0 .65-.3.65-.65V3.15a.65.65 0 0 0-.65-.65M5.27 4.86h.03c.36 0 .65-.3.65-.65V3.15a.65.65 0 0 0-.65-.65h-.03c-.36 0-.65.3-.65.65V4.2c0 .36.3.65.65.65Z", fill: "#2743AD" }),
React__default["default"].createElement("path", { d: "M5.56 8.17h-.5a.4.4 0 0 0-.4.4v.59c0 .22.18.4.4.4h.5a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.41m2.7 0h-.5a.4.4 0 0 0-.4.4v.59c0 .22.18.4.4.4h.5a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.41m2.7 0h-.5a.4.4 0 0 0-.4.4v.59c0 .22.18.4.4.4h.5a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.41m2.87 0h-.49a.4.4 0 0 0-.4.4v.59c0 .22.18.4.4.4h.49a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.41m-8.3 2.52h-.5a.4.4 0 0 0-.4.4v.58c0 .23.18.4.4.4h.5a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.4m2.7 0h-.5a.4.4 0 0 0-.4.4v.58c0 .23.18.4.4.4h.5a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.4m2.7 0h-.49a.4.4 0 0 0-.4.4v.58c0 .23.18.4.4.4h.5a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.4Zm2.87 0h-.49a.4.4 0 0 0-.4.4v.58c0 .23.18.4.4.4h.5a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.4Z", fill: "#2D87F3" }),
React__default["default"].createElement("path", { d: "M16 16.8a3.17 3.17 0 1 0 0-6.36 3.17 3.17 0 0 0 0 6.35Z", fill: "#FE921D" }),
React__default["default"].createElement("path", { d: "M15.78 13.62v-1.36a.21.21 0 0 1 .42 0v1.26l.48.4a.21.21 0 0 1-.01.33.21.21 0 0 1-.26-.01l-.55-.46-.02-.01a.2.2 0 0 1-.06-.15", fill: "#fff" })));
const NavCommunityIcon = (props) => (React__default["default"].createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
React__default["default"].createElement("path", { d: "M7.06 4.97h-2.3a3.12 3.12 0 0 0-3.1 3.1v.43a3.12 3.12 0 0 0 3.1 3.1h1.39s1.47 1.11 1.5.97c.03-.22-.23-.99-.23-.99a3.13 3.13 0 0 0 2.72-3.09v-.41a3.12 3.12 0 0 0-3.08-3.11m-2.7 3.55a.23.23 0 1 1 0-.46.23.23 0 0 1 0 .46m1.35.4a.33.33 0 1 1 0-.66.33.33 0 0 1 0 .65Zm1.57-.05", fill: "#2D87F3" }),
React__default["default"].createElement("path", { d: "M12.88 9.52a3.53 3.53 0 0 0-1.35 6.8s-.23 1.03-.2 1.25c.03.14 1.55-.99 1.55-.99a3.53 3.53 0 0 0 0-7.06m-1.33 4.24a.48.48 0 1 1 0-.97.48.48 0 0 1 0 .97m1.58.04a.33.33 0 1 1 0-.66.33.33 0 0 1 0 .66m1.34-.39a.23.23 0 1 1 0-.46.23.23 0 0 1 0 .46", fill: "#FFB521" }),
React__default["default"].createElement("path", { d: "M16.45 1.67h-3.87a1.88 1.88 0 0 0-1.88 2.06l.22 2.29a1.88 1.88 0 0 0 1.73 1.7s-.17.94-.14 1.16c.02.14 1.66-1.13 1.66-1.13l1.92-.03a1.88 1.88 0 0 0 1.86-1.59l.36-2.29a1.88 1.88 0 0 0-1.86-2.17M13.1 5.23a.48.48 0 1 1 .34-.14c-.1.1-.22.14-.34.14m1.57.05a.33.33 0 1 1 .23-.1.33.33 0 0 1-.23.1m1.34-.4a.23.23 0 1 1 .1-.01.2.2 0 0 1-.1.02Z", fill: "#91CAFF" })));
const NavDotIcon = (props) => (React__default["default"].createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
React__default["default"].createElement("rect", { x: "8.333", y: "8.333", width: "3.333", height: "3.333", rx: "1.667", fill: "#2D87F3" })));
const NavEshopIcon = (props) => (React__default["default"].createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
React__default["default"].createElement("path", { d: "m3.18 7.06 1.6 1.6 4.33-4.69a.72.72 0 0 0-.03-.99l-.22-.22a.72.72 0 0 0-.99-.02zm13.64 0-1.6 1.6-4.33-4.69a.72.72 0 0 1 .02-.99l.23-.22a.72.72 0 0 1 .99-.02z", fill: "#2743AD" }),
React__default["default"].createElement("path", { d: "M15.04 16.7H4.9a.78.78 0 0 1-.77-.7l-.7-6.67h13.09l-.7 6.67a.78.78 0 0 1-.78.7", fill: "#2D87F3" }),
React__default["default"].createElement("path", { d: "M6.23 15.7a.23.23 0 0 1-.23-.22l-.3-4.46a.23.23 0 1 1 .47-.04l.3 4.47a.23.23 0 0 1-.22.25zm2.39 0a.23.23 0 0 1-.23-.23L8.3 11a.23.23 0 1 1 .47 0l.07 4.46a.23.23 0 0 1-.22.24h-.01Zm5.15 0h-.02a.23.23 0 0 1-.2-.16.2.2 0 0 1-.02-.09l.3-4.47a.24.24 0 0 1 .25-.22.23.23 0 0 1 .22.26l-.3 4.46a.23.23 0 0 1-.23.22m-2.39 0a.23.23 0 0 1-.23-.23l.07-4.47a.24.24 0 0 1 .24-.23.23.23 0 0 1 .23.23l-.08 4.47a.23.23 0 0 1-.23.23", fill: "#2743AD" }),
React__default["default"].createElement("path", { d: "M16.04 18.12a2.01 2.01 0 1 0 0-4.03 2.01 2.01 0 0 0 0 4.03", fill: "#FE921D" }),
React__default["default"].createElement("path", { d: "M16.97 15.87h-.7v-.7a.23.23 0 0 0-.46 0v.7h-.7a.23.23 0 1 0 0 .47h.7v.69a.23.23 0 1 0 .47 0v-.7h.69a.23.23 0 1 0 0-.46", fill: "#fff" }),
React__default["default"].createElement("path", { d: "M16.58 9.48H3.42a.8.8 0 0 1-.78-.7l-.13-1.1a.8.8 0 0 1 .78-.88h13.42a.8.8 0 0 1 .78.88l-.13 1.1a.8.8 0 0 1-.78.7", fill: "#BCDEFF" })));
const NavHelpIcon = (props) => (React__default["default"].createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
React__default["default"].createElement("path", { d: "M10 1.667c-4.595 0-8.333 3.738-8.333 8.333 0 4.595 3.738 8.333 8.333 8.333 4.595 0 8.333-3.738 8.333-8.333 0-4.595-3.738-8.333-8.333-8.333Zm0 13.194a.695.695 0 1 1 0-1.39.695.695 0 0 1 0 1.39Zm1.1-4.415a.698.698 0 0 0-.405.631v.312a.694.694 0 1 1-1.39 0v-.312c0-.81.477-1.553 1.213-1.893.707-.326 1.218-1.19 1.218-1.615 0-.956-.778-1.736-1.736-1.736s-1.736.78-1.736 1.736a.694.694 0 1 1-1.389 0A3.129 3.129 0 0 1 10 4.444a3.129 3.129 0 0 1 3.125 3.125c0 .939-.814 2.318-2.026 2.877Z", fill: "#FF6F4D" })));
const NavLogOutIcon = (props) => (React__default["default"].createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
React__default["default"].createElement("path", { d: "M11.116 1.72 5.488.85a1.898 1.898 0 0 0-2.155 1.856v14.588a1.898 1.898 0 0 0 2.158 1.855l5.625-.869a1.865 1.865 0 0 0 1.592-1.855V3.575a1.87 1.87 0 0 0-1.592-1.855", fill: "#2D87F3" }),
React__default["default"].createElement("path", { d: "M17.642 9.584a.6.6 0 0 1-.232.472l-1.964 1.518a.446.446 0 0 1-.719-.353v-.51l-2.118-.01a.225.225 0 0 1-.223-.225v-1.8a.225.225 0 0 1 .224-.225l2.12.002-.004-.506a.446.446 0 0 1 .719-.354l1.965 1.52a.6.6 0 0 1 .232.471", fill: "#FF6F4D" }),
React__default["default"].createElement("path", { d: "M17.642 9.584a.6.6 0 0 1-.232.472l-1.964 1.518a.446.446 0 0 1-.719-.353v-.51l-2.118-.01a.225.225 0 0 1-.223-.225v-1.8a.225.225 0 0 1 .224-.225l2.12.002-.004-.506a.446.446 0 0 1 .719-.354l1.965 1.52a.6.6 0 0 1 .232.471m-7.603-.908v1.802c0 .124.1.225.224.225h1.257c.124 0 .225-.1.225-.225V8.676c0-.124-.1-.224-.225-.224h-1.257c-.124 0-.224.1-.224.224m-.673 1.809a.224.224 0 0 1-.225.225h-.407a.61.61 0 0 1-.609-.61V9.069a.61.61 0 0 1 .61-.61h.406a.224.224 0 0 1 .225.225z", fill: "#FF6F4D" })));
const NavMyHealthIcon = (props) => (React__default["default"].createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
React__default["default"].createElement("path", { d: "M6.114 3.333a4.64 4.64 0 0 1 3.565 1.708.412.412 0 0 0 .642 0 4.64 4.64 0 0 1 3.565-1.708c2.646 0 4.447 2.302 4.447 5.142 0 1.698-.904 4.446-2.675 6.102-2.522 2.358-4.665 2.965-5.392 3.11a1.3 1.3 0 0 1-.53 0c-.728-.146-2.871-.752-5.393-3.11-1.772-1.656-2.676-4.404-2.676-6.102 0-2.84 1.801-5.142 4.447-5.142", fill: "#FF6F4D" }),
React__default["default"].createElement("path", { d: "M13.298 11.226v-.829a1.205 1.205 0 0 0-1.202-1.204h-.208a.26.26 0 0 1-.261-.259v-.208a1.205 1.205 0 0 0-1.201-1.204h-.832A1.205 1.205 0 0 0 8.39 8.726v.205a.26.26 0 0 1-.259.261h-.207a1.2 1.2 0 0 0-1.202 1.202v.834a1.204 1.204 0 0 0 1.202 1.201h.207a.26.26 0 0 1 .259.262v.205A1.205 1.205 0 0 0 9.594 14.1h.832a1.204 1.204 0 0 0 1.201-1.204v-.208a.26.26 0 0 1 .261-.258h.208a1.205 1.205 0 0 0 1.202-1.204", fill: "#fff" })));
const NavSaveIcon = (props) => (React__default["default"].createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
React__default["default"].createElement("path", { d: "M4.767 17.236a1.36 1.36 0 0 0 1.256.188l4.097-1.397a.37.37 0 0 1 .28 0l4.097 1.397q.22.071.45.075c.29.002.573-.09.807-.263a1.43 1.43 0 0 0 .6-1.171V3.935A1.417 1.417 0 0 0 14.946 2.5H5.573a1.416 1.416 0 0 0-1.406 1.434v12.13a1.43 1.43 0 0 0 .6 1.172", fill: "#00CB8A" })));
const NavSettingsIcon = (props) => (React__default["default"].createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
React__default["default"].createElement("path", { d: "M17.339 8.075a2.177 2.177 0 0 1-1.717-2.944 1.02 1.02 0 0 0-.305-1.15 8.2 8.2 0 0 0-2.445-1.417 1.03 1.03 0 0 0-1.16.323 2.173 2.173 0 0 1-3.423 0 1.03 1.03 0 0 0-1.161-.323A8.2 8.2 0 0 0 4.85 3.842a1.03 1.03 0 0 0-.322 1.183 2.167 2.167 0 0 1-1.806 2.978 1.03 1.03 0 0 0-.9.828 8 8 0 0 0-.05 2.861 1.03 1.03 0 0 0 .906.861 2.166 2.166 0 0 1 1.767 3.061 1.01 1.01 0 0 0 .283 1.211A8.2 8.2 0 0 0 7.15 18.22q.17.059.35.061a1.02 1.02 0 0 0 .833-.433 2.15 2.15 0 0 1 1.778-.934 2.18 2.18 0 0 1 1.745.878 1.02 1.02 0 0 0 1.2.339 8.3 8.3 0 0 0 2.222-1.328 1.03 1.03 0 0 0 .3-1.172 2.167 2.167 0 0 1 1.739-2.995 1.03 1.03 0 0 0 .872-.844 8 8 0 0 0 .144-1.405q0-.749-.138-1.484a1.02 1.02 0 0 0-.856-.828m-4.561 2.312a2.778 2.778 0 1 1-5.556 0 2.778 2.778 0 0 1 5.556 0", fill: "#2D87F3" })));
const NavUserIcon = (props) => (React__default["default"].createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
React__default["default"].createElement("path", { d: "M10 19.167A9.167 9.167 0 1 0 10 .833a9.167 9.167 0 0 0 0 18.334", fill: "#BCDEFF" }),
React__default["default"].createElement("path", { d: "M17.356 15.463a9.188 9.188 0 0 0-14.716-.005 9.155 9.155 0 0 0 14.716.005", fill: "#2D87F3" }),
React__default["default"].createElement("path", { d: "M10 10.591a3.548 3.548 0 1 0 0-7.096 3.548 3.548 0 0 0 0 7.096", fill: "#2D87F3" })));
const VaccinationIcon = (props) => (React__default["default"].createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
React__default["default"].createElement("path", { d: "M1.11848 19.1667C1.19427 19.1666 1.26693 19.1365 1.32049 19.0829L4.30733 16.0962C4.36096 16.0426 4.3911 15.9699 4.39111 15.8941C4.39113 15.8183 4.36103 15.7455 4.30743 15.6919C4.25383 15.6383 4.18112 15.6081 4.1053 15.6081C4.02948 15.6081 3.95675 15.6382 3.90313 15.6918L0.916285 18.6787C0.876281 18.7186 0.849035 18.7696 0.837994 18.825C0.826954 18.8805 0.832614 18.938 0.854261 18.9903C0.875908 19.0425 0.912567 19.0872 0.9596 19.1186C1.00663 19.15 1.06193 19.1667 1.11848 19.1667Z", fill: "#626D7C" }),
React__default["default"].createElement("path", { d: "M7.71853 15.4925H7.72043L15.3384 7.87534L12.1272 4.66228L4.45021 12.3366C5.39488 13.2971 7.71853 15.4925 7.71853 15.4925Z", fill: "#2D87F3" }),
React__default["default"].createElement("path", { d: "M3.18097 14.9702L5.02953 16.8187C5.19838 16.9989 5.43172 17.1049 5.67851 17.1135C5.9253 17.122 6.16544 17.0325 6.34638 16.8645L7.71851 15.4923L4.50736 12.2793L3.13524 13.6514C2.96661 13.8324 2.87671 14.073 2.88529 14.3203C2.89386 14.5675 3.00021 14.8013 3.18097 14.9702Z", fill: "#BCDEFF" }),
React__default["default"].createElement("path", { d: "M17.7683 3.58334L16.4183 2.2333L13.5601 5.09143L14.9102 6.44147L17.7683 3.58334Z", fill: "#2B62CD" }),
React__default["default"].createElement("path", { d: "M7.71889 15.7783C7.77545 15.7783 7.83074 15.7616 7.87778 15.7301C7.92481 15.6987 7.96147 15.6541 7.98312 15.6018C8.00476 15.5496 8.01042 15.4921 7.99938 15.4366C7.98834 15.3811 7.9611 15.3302 7.92109 15.2902L4.70861 12.0779C4.65452 12.0268 4.58261 11.9988 4.50818 11.9998C4.43375 12.0009 4.36267 12.0309 4.31005 12.0836C4.25742 12.1362 4.22741 12.2073 4.22639 12.2817C4.22538 12.3562 4.25343 12.4281 4.3046 12.4821L7.51689 15.6944C7.54337 15.721 7.57485 15.7421 7.60952 15.7565C7.64419 15.7709 7.68136 15.7783 7.71889 15.7783Z", fill: "#BCDEFF" }),
React__default["default"].createElement("path", { d: "M9.48781 11.3095C9.54746 11.3096 9.60653 11.2978 9.66161 11.2749C9.71669 11.252 9.76669 11.2184 9.80874 11.1761L9.83847 11.1462L9.86819 11.1758C9.95336 11.2609 10.0689 11.3088 10.1893 11.3088C10.3098 11.3088 10.4253 11.2609 10.5104 11.1758L10.8535 10.8327C10.8957 10.7905 10.9291 10.7404 10.952 10.6853C10.9748 10.6302 10.9866 10.5711 10.9866 10.5114C10.9866 10.4517 10.9748 10.3926 10.952 10.3375C10.9291 10.2824 10.8957 10.2323 10.8535 10.1901L10.8232 10.1625L10.8531 10.1326C10.9382 10.0474 10.9861 9.93182 10.9861 9.81135C10.9861 9.69087 10.9382 9.57533 10.8531 9.49014L10.51 9.14711C10.4679 9.10487 10.4179 9.07136 10.3628 9.0485C10.3077 9.02563 10.2486 9.01386 10.1889 9.01386C10.1293 9.01386 10.0702 9.02563 10.0151 9.0485C9.96 9.07136 9.90995 9.10487 9.86781 9.14711L9.83808 9.17664L9.80836 9.14692C9.72313 9.06179 9.6076 9.01397 9.48715 9.01397C9.36669 9.01397 9.25116 9.06179 9.16594 9.14692L8.8229 9.48995C8.73774 9.57511 8.6899 9.69062 8.6899 9.81106C8.6899 9.9315 8.73774 10.047 8.8229 10.1322L8.85282 10.1621L8.82329 10.1918C8.73826 10.2771 8.69052 10.3925 8.69052 10.5129C8.69052 10.6333 8.73826 10.7488 8.82329 10.8341L9.16632 11.1771C9.2085 11.2193 9.25863 11.2528 9.31381 11.2755C9.36899 11.2982 9.42813 11.3098 9.48781 11.3095Z", fill: "white" }),
React__default["default"].createElement("path", { d: "M12.6184 3.4438L16.5573 7.38277C16.8001 7.6255 16.8001 8.01905 16.5573 8.26178C16.3146 8.50451 15.921 8.50451 15.6783 8.26178L11.7393 4.32281C11.4966 4.08008 11.4966 3.68653 11.7393 3.4438C11.9821 3.20107 12.3756 3.20107 12.6184 3.4438Z", fill: "#BCDEFF" }),
React__default["default"].createElement("path", { d: "M16.4563 1.22324L18.7767 3.54364C18.9921 3.75907 18.9921 4.10834 18.7767 4.32376C18.5613 4.53918 18.212 4.53918 17.9966 4.32376L15.6762 2.00336C15.4608 1.78793 15.4608 1.43866 15.6762 1.22324C15.8916 1.00782 16.2409 1.00782 16.4563 1.22324Z", fill: "#BCDEFF" })));
const StyledNavMenu = styled__default["default"].div `
padding: 16px;
border-radius: 16px;
background-color: white;
hr {
border-color: ${miscTheme.theme.colors.neutral100};
border-bottom-width: 0px;
border-style: solid;
}
.profile-nav-item-group {
background-color: white;
border-radius: 8px;
}
`;
const StyledNavMenuItem = styled__default["default"].div `
display: block;
border: 1px solid transparent;
transition: all 300ms linear;
cursor: pointer;
position: relative;
${(props) => props.hasSubmenu &&
react.css `
cursor: pointer;
`}
&[data-is-open='true'] {
& + div {
margin-top: 8px;
}
}
border-left-width: 0;
border-right-width: 0;
&[data-is-open='true'] {
& + div {
margin-top: 0;
}
.nav-menu-item:last-child {
border-bottom-color: ${miscTheme.theme.colors.neutral100};
}
}
.nav-menu-item {
background-color: ${miscTheme.theme.colors.neutral50};
}
.nav-menu-item {
padding-left: 38px;
}
`;
const StyledNavMenuItemContent = styled__default["default"].div `
display: flex;
align-items: center;
height: 48px;
border: 1px solid transparent;
transition: all 300ms;
border-radius: 8px;
&:hover {
background-color: ${miscTheme.theme.colors.neutral150};
}
&[data-active='true'] {
background-color: ${miscTheme.theme.colors.blue50};
}
`;
const StyledNavMenuItemDropdown = styled__default["default"].div `
margin-left: auto;
svg {
fill: ${miscTheme.theme.colors.gray600};
transition: transform 300ms;
}
&[data-is-open='true'] svg {
transform: rotate(180deg);
}
`;
const StyledNavFooterSubMenu = styled__default["default"].div `
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease-out;
[data-is-open='true'] & {
max-height: 500px;
transition-timing-function: ease-in;
}
`;
const rankIconUrlMap = {
helloSites: {
member: () => index$2.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-member.svg'),
ambassador: () => index$2.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-ambassador.svg'),
doctor: () => index$2.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-doctor.svg'),
expert: () => index$2.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-expert.svg'),
influencer: () => index$2.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-influencer.svg'),
},
marryBaby: {
member: () => index$2.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-member.svg'),
ambassador: () => index$2.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-ambassador.svg'),
doctor: () => index$2.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-doctor.svg'),
expert: () => index$2.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-expert.svg'),
influencer: () => index$2.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-influencer.svg'),
},
};
const Rank = ({ rank, siteType = 'helloSites', }) => {
const iconUrl = React.useMemo(() => {
var _a, _b;
return ((_b = (_a = rankIconUrlMap[siteType]) === null || _a === void 0 ? void 0 : _a[rank]) === null || _b === void 0 ? void 0 : _b.call(_a)) || '';
}, [rank, siteType]);
const { t } = index.useTranslations();
return (React__default["default"].createElement("div", { style: {
display: 'inline-flex',
height: 'fit-content',
alignItems: 'center',
padding: '5px 12px',
gap: '4px',
borderRadius: 16,
border: `1px solid ${siteType === 'helloSites' ? miscTheme.theme.colors.blue100 : miscTheme.theme.colors.mb100}`,
} },
React__default["default"].createElement("img", { src: iconUrl, alt: rank, style: {
height: 16,
width: 16,
} }),
React__default["default"].createElement(index$1.Text, { size: "s5", color: "gray.8", weight: "semiBold" }, t(`userProfile.userRank.${rank}`))));
};
const UserInfoSection = ({ siteType = 'helloSites', userInfo, }) => {
return (userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) ? (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement("div", { style: {
display: 'flex',
width: '100%',
justifyContent: 'space-between',
} },
React__default["default"].createElement(index$3.Avatar, { src: userInfo.avatar, alt: userInfo.name, size: 48, style: { marginBottom: 8 } }),
React__default["default"].createElement(Rank, { rank: "member", siteType: siteType })),
React__default["default"].createElement(index$1.Text, { size: "s3", weight: "semiBold", color: "gray.8", style: { marginBottom: 4 } }, userInfo.name),
React__default["default"].createElement(index$1.Text, { size: "n1", weight: "regular", color: siteType === 'helloSites' ? 'hb.6' : 'mb.6' },
"@",
userInfo.username),
React__default["default"].createElement("hr", null))) : null;
};
const ProfileNavigation = ({ className, activeItem: forceActiveItem, navMenuItems: navMenuItemsProp, style, onLogout, siteType = 'helloSites', userInfo, onNavigate, configs = {}, }) => {
const { enableProfileFindMyBooking = false } = configs;
const { locale } = index.useTranslations();
const [localActiveItem, setLocalActiveItem] = React.useState();
const activeItem = typeof forceActiveItem === 'string' ? forceActiveItem : localActiveItem;
const SSO_URL = normalizeLink.normalizeLinkSlash(normalizeLink.getCurrentSsoUrl(locale, siteType === 'marryBaby') + '/');
const BASE_URL = normalizeLink.normalizeLinkSlash(normalizeLink.getCurrentBaseUrl(locale, siteType === 'marryBaby') + '/');
const navMenuItems = navMenuItemsProp || [
[
{
key: 'userProfile.nav.header.viewProfile',
icon: React__default["default"].createElement(NavUserIcon, { width: "24", height: "24" }),
value: 'profile',
tracking: {
action: 'Profile Click',
},
link: `${SSO_URL}user/profile/`,
},
{
key: 'userProfile.nav.card.myHealth',
icon: React__default["default"].createElement(NavMyHealthIcon, { width: "24", height: "24" }),
value: 'myHealth',
tracking: {
action: 'My Health Click',
},
link: `${SSO_URL}user/health/`,
},
{
key: 'userProfile.nav.card.mySaved',
icon: React__default["default"].createElement(NavSaveIcon, { width: "24", height: "24" }),
iconColor: 'green_300',
value: 'saved',
tracking: {
action: 'Bookmarks Click',
},
link: `${SSO_URL}user/saved/`,
},
!!enableProfileFindMyBooking && {
key: 'navigation.find_my_booking',
icon: React__default["default"].createElement(VaccinationIcon, { width: "24", height: "24" }),
value: 'find_my_booking',
tracking: {
action: 'Find My Booking',
},
link: `${BASE_URL}care/find-my-booking`,
},
{
key: 'userProfile.nav.card.myBooking',
icon: React__default["default"].createElement(NavBookingIcon, { width: "24", height: "24" }),
value: 'booking',
disabled: !index$4.CARE_LOCALES.includes(locale),
tracking: {
action: 'Manage Booking Click',
},
link: `${SSO_URL}user/booking/`,
},
{
key: 'userProfile.nav.card.myCommunity',
icon: React__default["default"].createElement(NavCommunityIcon, { width: "24", height: "24" }),
value: 'myCommunities',
disabled: !index$4.LOCALE_HAS_COMMUNITY_SITE.includes(locale),
tracking: {
action: 'Community Click',
},
link: `${SSO_URL}user/my-communities/`,
},
],
...(index$4.ECOM_LOCALES.includes(locale)
? [
[
{
key: 'userProfile.nav.card.eCom',
icon: React__default["default"].createElement(NavEshopIcon, { width: "24", height: "24" }),
value: 'eCom',
disabled: !index$4.ECOM_LOCALES.includes(locale),
subMenu: [
{
key: 'userProfile.nav.card.ecom.manageOrders',
value: 'eCom-manageOrders',
icon: React__default["default"].createElement(NavDotIcon, { width: "24", height: "24" }),
link: `${BASE_URL}shop/ho-so/quan-li-don-hang/`,
tracking: {
action: 'Order Management Click',
},
},
{
key: 'userProfile.nav.card.ecom.DeliveryAddress',
value: 'eCom-manageAddress',
icon: React__default["default"].createElement(NavDotIcon, { width: "24", height: "24" }),
link: `${BASE_URL}shop/ho-so/dia-chi-giao-hang/`,
tracking: {
action: 'Address Management Click',
},
},
{
key: 'userProfile.nav.card.ecom.voucher',
value: 'eCom-voucher',
icon: React__default["default"].createElement(NavDotIcon, { width: "24", height: "24" }),
link: `${BASE_URL}shop/ho-so/khuyen-mai/`,
tracking: {
action: 'Voucher Click',
},
},
// {
// key: 'nav.card.memberCard',
// value: 'eCom-memberCard',
// icon: <NavDotIcon width="24"
// height="24"/>,
// link: routingHandler
// .getLocalisedUrl('', 'PROFILE_MEMBER_CARD')
// .toString(),
// tracking: {
// action: 'Member Card Click',
// },
// },
],
},
],
]
: []),
[
{
key: 'userProfile.nav.menu.accountSettings',
icon: React__default["default"].createElement(NavSettingsIcon, { width: "24", height: "24" }),
subMenu: [
// {
// key: 'common.profileNavigator.newsletterSubscription',
// value: 'subscription',
// icon: <NavDotIcon width="24" height="24" />,
// tracking: { action: 'Subscription Click' },
// link: `${SSO_URL}user/subscriptions/`,
// disabled: locale !== 'vi-VN',
// },
{
key: 'userProfile.nav.menu.password',
value: 'password',
icon: React__default["default"].createElement(NavDotIcon, { width: "24", height: "24" }),
tracking: { action: 'Set Password Click' },
link: `${SSO_URL}user/password/`,
},
{
key: 'userProfile.nav.menu.disableAccount',
value: 'disable-account',
icon: React__default["default"].createElement(NavDotIcon, { width: "24", height: "24" }),
tracking: { action: 'Disable Account Click' },
link: `${SSO_URL}user/disable-account/`,
},
...(index$4.DATA_PRIVACY_LOCALES.includes(locale)
? [
{
key: 'userProfile.nav.menu.dataPrivacy',
value: 'data-privacy',
icon: React__default["default"].createElement(NavDotIcon, { width: "24", height: "24" }),
tracking: { action: 'Data Privacy Click' },
link: `${SSO_URL}user/data-privacy/`,
},
]
: []),
],
},
],
[
{
key: 'userProfile.nav.menu.help',
icon: React__default["default"].createElement(NavHelpIcon, { width: "24", height: "24" }),
value: 'help',
link: `${SSO_URL}user/help`,
tracking: {
action: 'Support Click',
},
},
{
key: 'userProfile.nav.menu.logout',
icon: React__default["default"].createElement(NavLogOutIcon, { width: "24", height: "24" }),
value: 'logout',
tracking: {
action: 'Sign Out Click',
},
},
],
];
return (React__default["default"].createElement(StyledNavMenu, { className: className, style: style },
React__default["default"].createElement(UserInfoSection, { userInfo: userInfo, siteType: siteType }),
navMenuItems.map((items, index) => (React__default["default"].createElement(React.Fragment, { key: index },
React__default["default"].createElement("div", { className: "profile-nav-item-group", key: index }, items.map((item) => {
if (!item) {
return null;
}
return (React__default["default"].createElement(NavMenuItem, { key: item.key, item: item, activeKey: activeItem || '', onLogout: onLogout, onClick: () => setLocalActiveItem((k) => k === item.key ? undefined : item.key), siteType: siteType, onNavigate: onNavigate }));
})),
index !== navMenuItems.length - 1 && React__default["default"].createElement("hr", null))))));
};
const NavMenuItem = ({ item, activeKey, forceOpen, onLogout, onClick, siteType = 'helloSites', onNavigate, }) => {
var _a, _b;
const [localOpen, setLocalOpen] = React.useState(false);
const currentUrl = React.useMemo(() => {
if (typeof window !== 'undefined') {
return window.location.href;
}
else
return '';
}, []);
if (item.disabled) {
return null;
}
const { t } = index.useTranslations();
const hasChildActive = (_a = item.subMenu) === null || _a === void 0 ? void 0 : _a.some((subItem) => subItem.key === activeKey);
const isActive = activeKey === item.key;
React.useEffect(() => {
if (hasChildActive || isActive) {
setLocalOpen(true);
}
}, [hasChildActive, isActive]);
const isOpen = typeof forceOpen === 'boolean' ? forceOpen : localOpen;
return (React__default["default"].createElement(StyledNavMenuItem, { as: !item.subMenu ? 'a' : undefined, "data-is-open": isOpen, key: item.key, hasSubmenu: !!item.subMenu, onClick: () => {
onClick === null || onClick === void 0 ? void 0 : onClick();
if (item.subMenu && !forceOpen) {
setLocalOpen((k) => !k);
}
else {
if (item.value === 'logout') {
onLogout === null || onLogout === void 0 ? void 0 : onLogout();
}
else if (item.link) {
if (onNavigate) {
onNavigate(item.link);
}
else {
window.location.href = item.link;
}
}
}
}, "data-event-category": "Ecommerce", "data-event-action": ((_b = item === null || item === void 0 ? void 0 : item.tracking) === null || _b === void 0 ? void 0 : _b.action) || '', "data-event-label": currentUrl },
React__default["default"].createElement(StyledNavMenuItemContent, { "data-active": isActive },
item.icon,
React__default["default"].createElement(index$1.Text, { size: "p3", style: {
marginLeft: item.icon ? 24 : 48,
transition: `color 300ms`,
}, color: isActive ? (siteType === 'helloSites' ? 'hb.6' : 'mb.6') : 'gray.8' }, t(item.key)),
item.subMenu && (React__default["default"].createElement(StyledNavMenuItemDropdown, { "data-is-open": isOpen },
React__default["default"].createElement(ChevronDown.ChevronDown, { width: 14 })))),
item.subMenu && (React__default["default"].createElement(StyledNavFooterSubMenu, null, item.subMenu.map((subItem) => (React__default["default"].createElement(NavMenuItem, { key: subItem.key, item: subItem, activeKey: activeKey, onLogout: onLogout, siteType: siteType })))))));
};
exports.ProfileNavigation = ProfileNavigation;