@xo-union/tk-component-header-nav
Version:
195 lines (194 loc) • 8.17 kB
JavaScript
"use strict";
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js/object/define-property");
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
_Object$defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _tkUiSkeleton = require("@xo-union/tk-ui-skeleton");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _indexCjs = require("../../MegaMenu/index.cjs.js");
var _indexCjs2 = _interopRequireDefault(require("../PlaceholderMegaMenu/index.cjs.js"));
var _ContextCjs = require("../../Context.cjs.js");
var _layoutsCjs = require("../layouts.cjs.js");
const usePlanningToolsUnitImageId = () => {
const {
imageIds
} = (0, _ContextCjs.useHeaderNavContext)();
return imageIds.STYLE_QUIZ;
};
const FeaturedPlanningToolsSlot = _ref => {
let {
linkUrl,
linkProps,
copy,
imageId,
isLoading
} = _ref;
const {
classes
} = (0, _ContextCjs.useHeaderNavContext)();
if (isLoading) {
return /*#__PURE__*/_react.default.createElement(_tkUiSkeleton.Skeleton, {
"aria-label": "Loading experience..."
}, /*#__PURE__*/_react.default.createElement(_tkUiSkeleton.Bone, {
className: classes['bone-featured-img-one-by-one']
}), /*#__PURE__*/_react.default.createElement(_tkUiSkeleton.Bone, {
className: classes['bone-basic']
}));
}
return /*#__PURE__*/_react.default.createElement(_indexCjs.FeaturedUnitCard, {
as: "div",
linkUrl: linkUrl,
linkProps: linkProps,
copy: copy,
imageId: imageId
});
};
const useFeaturedPlanningToolsSlot1Data = () => {
const {
links,
weddingVisionData: {
hasWeddingVision,
isLoading
}
} = (0, _ContextCjs.useHeaderNavContext)();
const linkText = hasWeddingVision ? 'See style quiz results' : 'Take the style quiz';
const linkImg = usePlanningToolsUnitImageId();
const linkHref = hasWeddingVision ? links.WEDDING_VISION_LOGGED_IN : links.WEDDING_VISION;
return {
linkUrl: linkHref,
linkProps: {},
copy: linkText,
imageId: linkImg,
isLoading
};
};
const useFeaturedPlanningToolsSlot2Data = () => {
const {
links,
imageIds
} = (0, _ContextCjs.useHeaderNavContext)();
return {
linkUrl: links.PLANNER_APP,
linkProps: {
'data-trackable-selection': 'get the knot app'
},
copy: 'Get The Knot app',
imageId: imageIds.PLANNER_APP,
isLoading: false
};
};
const useFeaturedPlanningToolsSlot3Data = () => {
const {
links,
imageIds
} = (0, _ContextCjs.useHeaderNavContext)();
return {
linkUrl: links.BUDGETER,
linkProps: {},
copy: 'Explore Budget Advisor',
imageId: imageIds.BUDGETER,
isLoading: false
};
};
const PlanningToolsLoggedOutLinks = () => {
const {
links
} = (0, _ContextCjs.useHeaderNavContext)();
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_indexCjs.LinkColumn, null, /*#__PURE__*/_react.default.createElement(_indexCjs.MainCategorySecondaryLink, {
leftIcon: "checklist",
href: links.CHECKLIST
}, "Checklist"), /*#__PURE__*/_react.default.createElement(_indexCjs.MainCategorySecondaryLink, {
leftIcon: "budgeter",
href: links.BUDGETER
}, "Budget Advisor"), /*#__PURE__*/_react.default.createElement(_indexCjs.MainCategorySecondaryLink, {
leftIcon: "wedding_vision",
href: links.WEDDING_VISION
}, "Style quiz"), /*#__PURE__*/_react.default.createElement(_indexCjs.MainCategorySecondaryLink, {
leftIcon: "guests",
href: links.GUEST_LIST
}, "Guest list & RSVPs")), /*#__PURE__*/_react.default.createElement(_indexCjs.LinkColumn, null, /*#__PURE__*/_react.default.createElement(_indexCjs.MainCategoryPrimaryLink, {
href: links.PLANNER_APP
}, "Get The Knot app")));
};
const PlanningToolsLoggedInLinks = () => {
const {
links,
menuTypes
} = (0, _ContextCjs.useHeaderNavContext)();
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_indexCjs.LinkColumn, null, /*#__PURE__*/_react.default.createElement(_indexCjs.MainCategoryLinkMenu, {
id: "planning-tools-your-plan",
headingContent: "Your plan",
href: links.DASHBOARD,
menuID: menuTypes.PLANNING_TOOLS,
isOpenByDefault: true
}, /*#__PURE__*/_react.default.createElement(_indexCjs.SubCategoryLink, {
leftIcon: "checklist",
href: links.CHECKLIST_LOGGED_IN
}, "Checklist"), /*#__PURE__*/_react.default.createElement(_indexCjs.SubCategoryLink, {
leftIcon: "budgeter",
href: links.BUDGETER_LOGGED_IN
}, "Budget Advisor"), /*#__PURE__*/_react.default.createElement(_indexCjs.SubCategoryLink, {
leftIcon: "wedding_vision",
href: links.WEDDING_VISION_LOGGED_IN
}, "Style quiz"))), /*#__PURE__*/_react.default.createElement(_indexCjs.LinkColumn, null, /*#__PURE__*/_react.default.createElement(_indexCjs.MainCategoryLinkMenu, {
id: "planning-tools-your-guests-rsvps",
headingContent: "Your Guests & RSVPs",
href: links.GUEST_LIST_LOGGED_IN,
isOpenByDefault: true
}, /*#__PURE__*/_react.default.createElement(_indexCjs.SubCategoryLink, {
leftIcon: "guests",
href: links.GUEST_LIST_LOGGED_IN
}, "Guest list"), /*#__PURE__*/_react.default.createElement(_indexCjs.SubCategoryLink, {
leftIcon: "invitation",
href: links.ONLINE_RSVP
}, "Online RSVP"), /*#__PURE__*/_react.default.createElement(_indexCjs.SubCategoryLink, {
leftIcon: "send",
href: links.GUEST_MESSAGES
}, "Message guests"))), /*#__PURE__*/_react.default.createElement(_indexCjs.LinkColumn, null, /*#__PURE__*/_react.default.createElement(_indexCjs.MainCategoryPrimaryLink, {
href: links.PLANNER_APP
}, "Get The Knot app")));
};
const PlanningToolsMegaMenu = () => {
const {
menuTypes,
loggedIn,
links,
weddingVisionData: {
isLoading
},
__planningToolsFeaturedElements__
} = (0, _ContextCjs.useHeaderNavContext)();
const headingHref = loggedIn ? links.DASHBOARD : links.KNOT_HOST;
const featuredPlanningToolsSlot1Data = useFeaturedPlanningToolsSlot1Data();
const featuredPlanningToolsSlot2Data = useFeaturedPlanningToolsSlot2Data();
const featuredPlanningToolsSlot3Data = useFeaturedPlanningToolsSlot3Data();
const numFeaturedItems = __planningToolsFeaturedElements__;
return /*#__PURE__*/_react.default.createElement(_indexCjs.MegaMenu, {
menuID: menuTypes.PLANNING_TOOLS,
containerProps: {
'data-trackable-context-group': 'planning tools'
},
layout: numFeaturedItems === 2 ? _layoutsCjs.layout2LinkColsAnd2SmallFeaturedUnits : _layoutsCjs.layout2LinkColsAnd3SmallFeaturedUnits
}, isLoading ? /*#__PURE__*/_react.default.createElement(_indexCjs2.default, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_indexCjs.LinkSection, {
headingContent: "Planning tools",
headingTextProps: {
href: headingHref
}
}, loggedIn ? /*#__PURE__*/_react.default.createElement(PlanningToolsLoggedInLinks, null) : /*#__PURE__*/_react.default.createElement(PlanningToolsLoggedOutLinks, null)), /*#__PURE__*/_react.default.createElement(_indexCjs.FeaturedSection, {
headingContent: "Make planning a little easier",
isLoading: isLoading,
rowAs: "div"
}, /*#__PURE__*/_react.default.createElement(FeaturedPlanningToolsSlot, featuredPlanningToolsSlot1Data), /*#__PURE__*/_react.default.createElement(FeaturedPlanningToolsSlot, featuredPlanningToolsSlot2Data), numFeaturedItems === 3 && /*#__PURE__*/_react.default.createElement(FeaturedPlanningToolsSlot, featuredPlanningToolsSlot3Data))));
};
process.env.NODE_ENV !== "production" ? FeaturedPlanningToolsSlot.propTypes = {
linkUrl: _propTypes.default.string.isRequired,
linkProps: _propTypes.default.shape(),
copy: _propTypes.default.string.isRequired,
imageId: _propTypes.default.string.isRequired,
isLoading: _propTypes.default.bool.isRequired
} : void 0;
var _default = PlanningToolsMegaMenu;
exports.default = _default;