@xo-union/tk-component-header-nav
Version:
186 lines • 7.17 kB
JavaScript
import React from "react";
import { Skeleton, Bone } from "@xo-union/tk-ui-skeleton";
import PropTypes from "prop-types";
import { MegaMenu, FeaturedSection, LinkSection, MainCategoryLinkMenu, LinkColumn, MainCategoryPrimaryLink, MainCategorySecondaryLink, SubCategoryLink, FeaturedUnitCard } from "../../MegaMenu/index.js";
import PlaceholderMegaMenu from "../PlaceholderMegaMenu/index.js";
import { useHeaderNavContext } from "../../Context.js";
import { layout2LinkColsAnd2SmallFeaturedUnits, layout2LinkColsAnd3SmallFeaturedUnits } from "../layouts.js";
const usePlanningToolsUnitImageId = () => {
const {
imageIds
} = useHeaderNavContext();
return imageIds.STYLE_QUIZ;
};
const FeaturedPlanningToolsSlot = _ref => {
let {
linkUrl,
linkProps,
copy,
imageId,
isLoading
} = _ref;
const {
classes
} = useHeaderNavContext();
if (isLoading) {
return /*#__PURE__*/React.createElement(Skeleton, {
"aria-label": "Loading experience..."
}, /*#__PURE__*/React.createElement(Bone, {
className: classes['bone-featured-img-one-by-one']
}), /*#__PURE__*/React.createElement(Bone, {
className: classes['bone-basic']
}));
}
return /*#__PURE__*/React.createElement(FeaturedUnitCard, {
as: "div",
linkUrl: linkUrl,
linkProps: linkProps,
copy: copy,
imageId: imageId
});
};
const useFeaturedPlanningToolsSlot1Data = () => {
const {
links,
weddingVisionData: {
hasWeddingVision,
isLoading
}
} = 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
} = 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
} = useHeaderNavContext();
return {
linkUrl: links.BUDGETER,
linkProps: {},
copy: 'Explore Budget Advisor',
imageId: imageIds.BUDGETER,
isLoading: false
};
};
const PlanningToolsLoggedOutLinks = () => {
const {
links
} = useHeaderNavContext();
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LinkColumn, null, /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
leftIcon: "checklist",
href: links.CHECKLIST
}, "Checklist"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
leftIcon: "budgeter",
href: links.BUDGETER
}, "Budget Advisor"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
leftIcon: "wedding_vision",
href: links.WEDDING_VISION
}, "Style quiz"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
leftIcon: "guests",
href: links.GUEST_LIST
}, "Guest list & RSVPs")), /*#__PURE__*/React.createElement(LinkColumn, null, /*#__PURE__*/React.createElement(MainCategoryPrimaryLink, {
href: links.PLANNER_APP
}, "Get The Knot app")));
};
const PlanningToolsLoggedInLinks = () => {
const {
links,
menuTypes
} = useHeaderNavContext();
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LinkColumn, null, /*#__PURE__*/React.createElement(MainCategoryLinkMenu, {
id: "planning-tools-your-plan",
headingContent: "Your plan",
href: links.DASHBOARD,
menuID: menuTypes.PLANNING_TOOLS,
isOpenByDefault: true
}, /*#__PURE__*/React.createElement(SubCategoryLink, {
leftIcon: "checklist",
href: links.CHECKLIST_LOGGED_IN
}, "Checklist"), /*#__PURE__*/React.createElement(SubCategoryLink, {
leftIcon: "budgeter",
href: links.BUDGETER_LOGGED_IN
}, "Budget Advisor"), /*#__PURE__*/React.createElement(SubCategoryLink, {
leftIcon: "wedding_vision",
href: links.WEDDING_VISION_LOGGED_IN
}, "Style quiz"))), /*#__PURE__*/React.createElement(LinkColumn, null, /*#__PURE__*/React.createElement(MainCategoryLinkMenu, {
id: "planning-tools-your-guests-rsvps",
headingContent: "Your Guests & RSVPs",
href: links.GUEST_LIST_LOGGED_IN,
isOpenByDefault: true
}, /*#__PURE__*/React.createElement(SubCategoryLink, {
leftIcon: "guests",
href: links.GUEST_LIST_LOGGED_IN
}, "Guest list"), /*#__PURE__*/React.createElement(SubCategoryLink, {
leftIcon: "invitation",
href: links.ONLINE_RSVP
}, "Online RSVP"), /*#__PURE__*/React.createElement(SubCategoryLink, {
leftIcon: "send",
href: links.GUEST_MESSAGES
}, "Message guests"))), /*#__PURE__*/React.createElement(LinkColumn, null, /*#__PURE__*/React.createElement(MainCategoryPrimaryLink, {
href: links.PLANNER_APP
}, "Get The Knot app")));
};
const PlanningToolsMegaMenu = () => {
const {
menuTypes,
loggedIn,
links,
weddingVisionData: {
isLoading
},
__planningToolsFeaturedElements__
} = useHeaderNavContext();
const headingHref = loggedIn ? links.DASHBOARD : links.KNOT_HOST;
const featuredPlanningToolsSlot1Data = useFeaturedPlanningToolsSlot1Data();
const featuredPlanningToolsSlot2Data = useFeaturedPlanningToolsSlot2Data();
const featuredPlanningToolsSlot3Data = useFeaturedPlanningToolsSlot3Data();
const numFeaturedItems = __planningToolsFeaturedElements__;
return /*#__PURE__*/React.createElement(MegaMenu, {
menuID: menuTypes.PLANNING_TOOLS,
containerProps: {
'data-trackable-context-group': 'planning tools'
},
layout: numFeaturedItems === 2 ? layout2LinkColsAnd2SmallFeaturedUnits : layout2LinkColsAnd3SmallFeaturedUnits
}, isLoading ? /*#__PURE__*/React.createElement(PlaceholderMegaMenu, null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LinkSection, {
headingContent: "Planning tools",
headingTextProps: {
href: headingHref
}
}, loggedIn ? /*#__PURE__*/React.createElement(PlanningToolsLoggedInLinks, null) : /*#__PURE__*/React.createElement(PlanningToolsLoggedOutLinks, null)), /*#__PURE__*/React.createElement(FeaturedSection, {
headingContent: "Make planning a little easier",
isLoading: isLoading,
rowAs: "div"
}, /*#__PURE__*/React.createElement(FeaturedPlanningToolsSlot, featuredPlanningToolsSlot1Data), /*#__PURE__*/React.createElement(FeaturedPlanningToolsSlot, featuredPlanningToolsSlot2Data), numFeaturedItems === 3 && /*#__PURE__*/React.createElement(FeaturedPlanningToolsSlot, featuredPlanningToolsSlot3Data))));
};
process.env.NODE_ENV !== "production" ? FeaturedPlanningToolsSlot.propTypes = {
linkUrl: PropTypes.string.isRequired,
linkProps: PropTypes.shape(),
copy: PropTypes.string.isRequired,
imageId: PropTypes.string.isRequired,
isLoading: PropTypes.bool.isRequired
} : void 0;
export default PlanningToolsMegaMenu;