@xo-union/tk-component-header-nav
Version:
335 lines (334 loc) • 19.1 kB
JavaScript
"use strict";
var _WeakMap = require("@babel/runtime-corejs3/core-js/weak-map");
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js/object/define-property");
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js/object/get-own-property-descriptor");
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
_Object$defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _noop = _interopRequireDefault(require("lodash/noop"));
var _reactCssModules = require("@xo-union/react-css-modules");
var _classesPropType = _interopRequireDefault(require("@xo-union/classes-prop-type"));
var _tkUiBreakpoints = require("@xo-union/tk-ui-breakpoints");
var _tkComponentButtons = require("@xo-union/tk-component-buttons");
var _tkComponentBadges = require("@xo-union/tk-component-badges");
var _uiAccessibility = require("@xo-union/ui-accessibility");
var _classnames = _interopRequireDefault(require("classnames"));
var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
var _useNavigationMenusCjs = _interopRequireDefault(require("./useNavigationMenus.cjs.js"));
var _ContextCjs = require("./Context.cjs.js");
var _indexCjs = _interopRequireDefault(require("./TopLevelNav/index.cjs.js"));
var _indexCjs2 = _interopRequireWildcard(require("./TopLevelButton/index.cjs.js"));
var _indexCjs3 = _interopRequireDefault(require("./TheKnotLogo/index.cjs.js"));
var _indexCjs4 = _interopRequireDefault(require("./TopLevelList/index.cjs.js"));
var _indexCjs5 = _interopRequireWildcard(require("./TopLevelAside/index.cjs.js"));
var _indexCjs6 = _interopRequireDefault(require("./TopLevelMessageBar/index.cjs.js"));
var _indexCjs7 = require("./MegaMenus/index.cjs.js");
var _indexCjs8 = _interopRequireDefault(require("./AccountSettings/index.cjs.js"));
var _indexCjs9 = require("./AccountCTAs/index.cjs.js");
var _indexCjs10 = _interopRequireDefault(require("./Avatar/index.cjs.js"));
var _indexCjs11 = _interopRequireDefault(require("./HamburgerButton/index.cjs.js"));
var _indexCjs12 = _interopRequireDefault(require("./ConversationsIcon/index.cjs.js"));
var _indexCjs13 = _interopRequireDefault(require("./Overlay/index.cjs.js"));
var _useAnimationEnabledCjs = _interopRequireDefault(require("./useAnimationEnabled.cjs.js"));
var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
var _indexCjs14 = _interopRequireDefault(require("./constants/imageIds/index.cjs.js"));
var _indexCjs15 = _interopRequireDefault(require("../../utils/shouldShowPrideLogo/index.cjs.js"));
var _useHeaderClickTrackerCjs = _interopRequireDefault(require("./useHeaderClickTracker.cjs.js"));
var _useWeddingVisionDataCjs = _interopRequireDefault(require("./useWeddingVisionData.cjs.js"));
var _useWeddingWebsiteDataCjs = _interopRequireDefault(require("./useWeddingWebsiteData.cjs.js"));
var _isRequiredAndOneOfOrNullCjs = _interopRequireDefault(require("../../utils/isRequiredAndOneOfOrNull.cjs.js"));
var _indexCjs16 = _interopRequireDefault(require("./ResizeObserverNav/index.cjs.js"));
var _indexCjs17 = require("./MegaMenu/index.cjs.js");
var _typesCjs = require("./types.cjs.js");
var _indexCjs18 = require("./Experiments/index.cjs.js");
var _indexCjs19 = require("./FavoritesLink/index.cjs.js");
var _useDefaultPropsCjs = require("./useDefaultProps.cjs.js");
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const HeaderNav = props => {
var _membership$data, _membership$data2, _membership$data2$mem, _membership$data3;
const mainMenuID = 'header-main-menu';
const mainMenuHeadingID = 'header-main-menu-heading';
const {
membership,
showRewardsBar,
loggedIn = !!((_membership$data = membership.data) !== null && _membership$data !== void 0 && _membership$data.member),
couplePhotoUrl = (_membership$data2 = membership.data) === null || _membership$data2 === void 0 ? void 0 : (_membership$data2$mem = _membership$data2.member) === null || _membership$data2$mem === void 0 ? void 0 : _membership$data2$mem.couple_photo_url,
memberIsLoading = (_membership$data3 = membership.data) === null || _membership$data3 === void 0 ? void 0 : _membership$data3.isLoading,
analyticsProps,
activeProduct,
prideLogo = (0, _indexCjs15.default)(),
onClickLogOut = membership.actions.logOut,
onClickLogIn = _noop.default,
onClickSignUp = _noop.default,
unreadMessagesCount,
classes: propsClasses,
favorites,
links,
__openOnLoad__ = null,
__weddingVisionData__,
__weddingWebsiteData__,
__renderDraftsLink__,
__planningToolsFeaturedElements__ = 3
} = (0, _useDefaultPropsCjs.useDefaultProps)(props);
const handleAnalyticsClick = (0, _useHeaderClickTrackerCjs.default)(analyticsProps);
const animationEnabled = (0, _useAnimationEnabledCjs.default)();
const classes = (0, _reactCssModules.useClasses)(_stylesModule.default, propsClasses);
const buttonClasses = (0, _reactCssModules.useClassesMapper)((0, _reactCssModules.compose)({
btn: classes['btn-override'],
'animated-element': classes['btn-override-animated-element']
}), propsClasses);
const mobileMedia = (0, _tkUiBreakpoints.useMobileMedia)();
const [navMenuState, navMenuActions, navMenuSelectors, navMenuRefs] = (0, _useNavigationMenusCjs.default)({
mobileMedia,
activeProduct,
__openOnLoad__
});
(0, _uiAccessibility.useNoScrollEffect)({
enabled: navMenuState.isHamburgerOpenInMobile
});
(0, _uiAccessibility.useGlobalKeyboardEscapeEffect)({
enabled: navMenuState.isHamburgerOpenInMobile || navMenuState.isAnyMenuOpen,
onEscapeKey: evt => {
evt.stopImmediatePropagation();
navMenuActions.closeLast();
}
});
const [weddingVisionData, fetchWeddingVisionData] = (0, _useWeddingVisionDataCjs.default)(__weddingVisionData__);
const [weddingWebsiteData, fetchWeddingWebsiteData] = (0, _useWeddingWebsiteDataCjs.default)(__weddingWebsiteData__);
const closeHamburgerOnClick = handler => event => {
if (navMenuState.isHamburgerOpen) {
navMenuActions.closeHamburger();
}
handler(event);
};
const fetchAppData = function () {
let productToFetch = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeProduct;
if (productToFetch === 'planning-tools') {
fetchWeddingVisionData(loggedIn);
}
if (productToFetch === 'wedding-website') {
fetchWeddingWebsiteData(loggedIn);
}
};
const context = {
mainMenuID,
mainMenuHeadingID,
classes,
mobileMedia,
navMenuActions,
navMenuSelectors,
navMenuState,
navMenuRefs,
// Move to membershipData object?
loggedIn,
weddingWebsiteData,
weddingVisionData,
fetchAppData,
memberIsLoading,
menuTypes: _typesCjs.menuTypes,
links,
imageIds: _indexCjs14.default,
prideLogo,
activeProduct,
__renderDraftsLink__,
__planningToolsFeaturedElements__
};
return /*#__PURE__*/_react.default.createElement(_ContextCjs.Provider, {
value: context
}, /*#__PURE__*/_react.default.createElement(_indexCjs6.default, {
isEnabled: showRewardsBar
}), /*#__PURE__*/_react.default.createElement(_tkComponentButtons.ThemeProvider, {
classes: buttonClasses
}, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
disabled: !navMenuState.isHamburgerOpenInMobile,
autoFocus: false,
returnFocus: true
}, /*#__PURE__*/_react.default.createElement(_indexCjs16.default, {
"aria-label": "Header",
className: (0, _classnames.default)(classes['nav-container'], !navMenuState.isHamburgerOpen && classes['hamburger-is-closed'], navMenuState.isAnyMegaMenuOpen && classes['mega-menu-is-open'], !animationEnabled && classes['no-animation'], loggedIn && classes['is-logged-in'], memberIsLoading && classes['member-is-loading']),
isHamburgerOpenInMobile: navMenuState.isHamburgerOpenInMobile,
onClick: handleAnalyticsClick
}, /*#__PURE__*/_react.default.createElement(_indexCjs11.default, null), /*#__PURE__*/_react.default.createElement(_indexCjs13.default, null, /*#__PURE__*/_react.default.createElement("div", {
className: classes['top-level-nav-container']
}, /*#__PURE__*/_react.default.createElement(_indexCjs.default, {
headingContent: "Main menu"
}, /*#__PURE__*/_react.default.createElement(_indexCjs3.default, {
className: classes['hide-in-mobile']
}), /*#__PURE__*/_react.default.createElement(_indexCjs4.default, null, /*#__PURE__*/_react.default.createElement(_indexCjs2.default, {
menuID: _typesCjs.menuTypes.PLANNING_TOOLS
}, "Planning Tools"), /*#__PURE__*/_react.default.createElement(_indexCjs2.default, {
menuID: _typesCjs.menuTypes.VENDORS
}, "Vendors"), /*#__PURE__*/_react.default.createElement(_indexCjs2.default, {
menuID: _typesCjs.menuTypes.WEDDING_WEBSITE
}, "Wedding Website"), /*#__PURE__*/_react.default.createElement(_indexCjs2.default, {
menuID: _typesCjs.menuTypes.INVITATIONS
}, "Invitations"), /*#__PURE__*/_react.default.createElement(_indexCjs2.default, {
menuID: _typesCjs.menuTypes.REGISTRY
}, "Registry"), /*#__PURE__*/_react.default.createElement(_indexCjs2.default, {
menuID: _typesCjs.menuTypes.ATTIRE_RINGS
}, "Attire & Rings"), /*#__PURE__*/_react.default.createElement(_indexCjs2.default, {
menuID: _typesCjs.menuTypes.IDEAS_ADVICE
}, "Ideas & Advice"), /*#__PURE__*/_react.default.createElement(_indexCjs2.TopLevelLink, {
href: "https://weddingshop.theknot.com/?itm_source=theknot.com&itm_medium=referral&itm_campaign=TKmainnav"
}, "Gifts & Favors")), /*#__PURE__*/_react.default.createElement(_indexCjs5.default, null, loggedIn ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)(classes['account-container'], classes['hide-in-mobile'])
}, favorites !== false && /*#__PURE__*/_react.default.createElement(_indexCjs19.FavoritesLink, favorites), /*#__PURE__*/_react.default.createElement(_indexCjs12.default, {
unreadMessagesCount: unreadMessagesCount || 0
}), /*#__PURE__*/_react.default.createElement(_indexCjs2.default, {
menuID: _typesCjs.menuTypes.ACCOUNT_SETTINGS
}, /*#__PURE__*/_react.default.createElement(_tkComponentBadges.PillBadge, {
className: classes['account-settings-button']
}, /*#__PURE__*/_react.default.createElement(_indexCjs10.default, {
couplePhotoUrl: couplePhotoUrl
}), "Your account"))), /*#__PURE__*/_react.default.createElement(_indexCjs8.default, {
menuID: _typesCjs.menuTypes.ACCOUNT_SETTINGS,
headingContent: "Account Settings",
couplePhotoUrl: couplePhotoUrl
}, /*#__PURE__*/_react.default.createElement(_indexCjs8.default.SubMenuLink, {
href: links.WEDDING_SETTINGS
}, "Account settings"), /*#__PURE__*/_react.default.createElement(_indexCjs8.default.SubMenuLink, {
href: "https://theknot.zendesk.com"
}, "Customer service"), /*#__PURE__*/_react.default.createElement(_indexCjs9.LogOutButton, {
onClick: onClickLogOut
}))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
className: classes['top-level-nav-right-aside-link-container']
}, /*#__PURE__*/_react.default.createElement(_indexCjs5.TopLevelAsideLink, {
iconName: "guests_selected",
href: links.FIND_A_COUPLES_REGISTRY,
hideLinkInDesktop: true
}, "Find a couple"), /*#__PURE__*/_react.default.createElement(_indexCjs5.TopLevelAsideLink, {
className: classes['hide-in-desktop'],
href: "https://helpcenter.theknot.com",
hideLinkInDesktop: true
}, "Customer service")), /*#__PURE__*/_react.default.createElement(_indexCjs9.AccountCTAsContainer, null, /*#__PURE__*/_react.default.createElement(_indexCjs9.LogInButton, {
onClick: closeHamburgerOnClick(onClickLogIn),
size: "sm",
hideLoadingInMobile: true
}), /*#__PURE__*/_react.default.createElement(_indexCjs9.SignUpButton, {
onClick: closeHamburgerOnClick(onClickSignUp),
size: "sm",
hideLoadingInMobile: true
}))))), /*#__PURE__*/_react.default.createElement(_indexCjs17.SharedMegaMenuContainer, null, /*#__PURE__*/_react.default.createElement(_indexCjs7.PlanningToolsMegaMenu, null), /*#__PURE__*/_react.default.createElement(_indexCjs7.VendorsMegaMenu, null), /*#__PURE__*/_react.default.createElement(_indexCjs7.WeddingWebsiteMegaMenu, null), /*#__PURE__*/_react.default.createElement(_indexCjs7.InvitationsMegaMenu, null), /*#__PURE__*/_react.default.createElement(_indexCjs7.RegistryMegaMenu, null), /*#__PURE__*/_react.default.createElement(_indexCjs7.AttireRingsMegaMenu, null), /*#__PURE__*/_react.default.createElement(_indexCjs7.IdeasAdviceMegaMenu, null)))), /*#__PURE__*/_react.default.createElement("div", {
className: classes['mobile-app-bar-items'],
ref: navMenuRefs.mobileAppBarItemsRef
}, /*#__PURE__*/_react.default.createElement(_indexCjs3.default, null), /*#__PURE__*/_react.default.createElement(_indexCjs9.AccountCTAsContainer, null, loggedIn ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, favorites !== false && /*#__PURE__*/_react.default.createElement(_indexCjs19.FavoritesLink, favorites), /*#__PURE__*/_react.default.createElement(_indexCjs12.default, {
unreadMessagesCount: unreadMessagesCount || 0
}), /*#__PURE__*/_react.default.createElement("a", {
href: links.ACCOUNT_SETTINGS,
"aria-label": "Your account",
title: "Your account"
}, /*#__PURE__*/_react.default.createElement(_indexCjs10.default, {
couplePhotoUrl: couplePhotoUrl
}))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_indexCjs9.LogInButton, {
onClick: closeHamburgerOnClick(onClickLogIn),
hideLoadingInMediaSmLow: true
}), /*#__PURE__*/_react.default.createElement(_indexCjs9.SignUpButton, {
onClick: closeHamburgerOnClick(onClickSignUp)
}))))))));
};
process.env.NODE_ENV !== "production" ? HeaderNav.propTypes = {
/**
* Whether or not to render the logged in version
*/
loggedIn: _propTypes.default.bool,
/**
* Sets the menu that should be shown when the hamburger menu is opened and adds an active underline for the menu button on desktop
*/
activeProduct: (0, _isRequiredAndOneOfOrNullCjs.default)(['planning-tools', 'vendors', 'wedding-website', 'invitations', 'registry', 'attire-rings', 'ideas-advice']),
/**
* Callback for clicking log in CTA
*/
onClickLogIn: _propTypes.default.func,
/**
* Callback for clicking sign up CTA
*/
onClickSignUp: _propTypes.default.func,
/**
* Callback for clicking log out CTA
*/
onClickLogOut: _propTypes.default.func,
classes: (0, _classesPropType.default)(),
/**
* Environment to be used to determine which host for The Knot to use (www vs qa-beta). Supported values are `qa` and `production`. When not supplied, URLs default to being relative to the current host.
**/
knotHostEnv: _propTypes.default.oneOf(['qa', 'production']),
/**
* Whether or not to display the TK logo as the pride logo (with rainbow gradient).
* Defaults to true during June unless explicitly set
*/
prideLogo: _propTypes.default.bool,
/**
* Props for analytics component. See [@xo-union/tk-component-analytics](/packages/@xo-union/tk-component-analytics)
*/
analyticsProps: _propTypes.default.shape({
product: _propTypes.default.string.isRequired
}).isRequired,
/**
* Media API image id of couple photo. Will be displayed in place of generic avatar.
*/
couplePhotoUrl: _propTypes.default.string,
/**
* A number greater than 0 will render the ConversationsActive icons state.
*/
unreadMessagesCount: _propTypes.default.number,
/**
* Renders the "Your Favorites Inspiration" link (with a heart icon) in the Main navigation nav
* for all pages. By default, it avoids rendering in "https://www.theknot.com/<marketplace | review-wedding-vendors | inbox>"
* but allows opting in to render by specifying `true` or an object with `isFilled` and `href` properties.
*/
favorites: _propTypes.default.oneOf([_propTypes.default.bool, _propTypes.default.shape({
isFilled: _propTypes.default.bool,
href: _propTypes.default.string
})]),
/**
* Extend the list of links. Can be used to override specific links
*/
links: _propTypes.default.objectOf(_propTypes.default.string),
/**
* Override the browser location object.
* Primarily used for testing purposes.
*/
location: _propTypes.default.shape({
pathname: _propTypes.default.string,
search: _propTypes.default.string
}),
/**
* Membership data object
*/
membershipData: _propTypes.default.objectOf(_propTypes.default.any),
/**
* Whether or not to show the rewards bar
*/
showRewardsBar: _propTypes.default.bool,
/**
* Open menu on load. For internal testing purposes only, do not use in production.
*/
__openOnLoad__: _propTypes.default.string,
/**
* The loading state for when the member is loading on page load.
*/
memberIsLoading: _propTypes.default.bool,
/**
* Wedding Vision Data on load. For internal testing purposes only, do not use in production.
*/
__weddingVisionData__: _propTypes.default.objectOf(_propTypes.default.any),
/**
* Wedding Vision Data on load. For internal testing purposes only, do not use in production.
*/
__weddingWebsiteData__: _propTypes.default.objectOf(_propTypes.default.any),
/**
* Renders the "Your Drafts" item on "Invitations" tab of the Main navigation nav.
*/
__renderDraftsLink__: _propTypes.default.bool,
/**
* Number of featured elements to display in the Planning Tools Mega Menu.
*/
__planningToolsFeaturedElements__: _propTypes.default.number
} : void 0;
var _default = (0, _indexCjs18.provideExperiments)(HeaderNav);
exports.default = _default;