@xo-union/tk-component-header-nav
Version:
184 lines (182 loc) • 8.63 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 _tkUiBreakpoints = require("@xo-union/tk-ui-breakpoints");
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 TopDesignsSection = () => {
const {
links,
imageIds
} = (0, _ContextCjs.useHeaderNavContext)();
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_indexCjs.FeaturedUnitCard, {
subtleBorder: true,
linkUrl: links.WWS_ELEGANT_BRIDGERTON,
imageId: imageIds.WWS_ELEGANT_BRIDGERTON,
copy: "Elegant Antique Toile Frame by Bridgerton"
}), /*#__PURE__*/_react.default.createElement(_indexCjs.FeaturedUnitCard, {
subtleBorder: true,
linkUrl: links.WWS_BELOVED_FLORAL,
imageId: imageIds.WWS_BELOVED_FLORAL_RED,
copy: "Beloved Floral - Red"
}), /*#__PURE__*/_react.default.createElement(_indexCjs.FeaturedUnitCard, {
subtleBorder: true,
linkUrl: links.WWS_ROMANTIC_CALLIGRAPHY,
imageId: imageIds.WWS_ROMANTIC_CALLIGRAPHY,
copy: "Romantic Calligraphy"
}), /*#__PURE__*/_react.default.createElement(_indexCjs.FeaturedUnitCard, {
subtleBorder: true,
linkUrl: links.WWS_ELEGANT_GLOW,
imageId: imageIds.WWS_ELEGANT_GLOW_BLUE,
copy: "Elegant Glow - Blue"
}));
};
const TopDesigns2Section = () => {
const {
links,
imageIds
} = (0, _ContextCjs.useHeaderNavContext)();
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_indexCjs.FeaturedUnitCard, {
linkUrl: links.PAPER,
imageId: imageIds.WWS_MATCHING_INVITES_AND_PAPER,
copy: "Explore Matching Invites and Paper"
}), /*#__PURE__*/_react.default.createElement(_indexCjs.FeaturedUnitCard, {
linkUrl: links.REGISTRY,
imageId: imageIds.WWS_ADD_YOUR_REGISTRY,
copy: "Add Your Registry to Your Website"
}));
};
const WeddingWebsiteFeaturedSection = () => {
const {
weddingWebsiteData: {
hasWeddingWebsite,
isLoading
},
loggedIn
} = (0, _ContextCjs.useHeaderNavContext)();
if (isLoading) {
return null;
}
const loggedInWithWeddingWebsite = loggedIn && hasWeddingWebsite;
return /*#__PURE__*/_react.default.createElement(_indexCjs.FeaturedSection, {
headingContent: loggedInWithWeddingWebsite ? 'Round Out Your Website' : 'Check Out Top Designs'
}, loggedInWithWeddingWebsite ? /*#__PURE__*/_react.default.createElement(TopDesigns2Section, null) : /*#__PURE__*/_react.default.createElement(TopDesignsSection, null));
};
const LoggedOutLinks = () => {
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.MainCategoryLinkMenu, {
id: "wedding-website-explore-wedding-websites",
headingContent: "Explore wedding websites",
href: links.WEDDING_WEBSITES,
isOpenByDefault: true
}, /*#__PURE__*/_react.default.createElement(_indexCjs.SubCategoryLink, {
leftIcon: "edit",
href: links.START_WEDDING_WEBSITE
}, "Start a website"), /*#__PURE__*/_react.default.createElement(_indexCjs.SubCategoryLink, {
leftIcon: "color_palette",
href: links.START_WEDDING_WEBSITE
}, "Browse website designs"))), /*#__PURE__*/_react.default.createElement(_indexCjs.LinkColumn, null, /*#__PURE__*/_react.default.createElement(_indexCjs.MainCategoryPrimaryLink, {
href: links.FIND_A_COUPLES_REGISTRY
}, "Find a couple's website")));
};
const LoggedInLinks = () => {
const {
links,
weddingWebsiteData
} = (0, _ContextCjs.useHeaderNavContext)();
const mobileMedia = (0, _tkUiBreakpoints.useMobileMedia)();
const {
hasWeddingWebsite,
slug
} = weddingWebsiteData;
const websiteLink = hasWeddingWebsite ? links.PREVIEW_WEBSITE : links.START_WEDDING_WEBSITE;
// there are 3 different logged in states to consider:
// 1. user is logged in and has not started a wedding website
const unPublishedWebsiteLinks = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_indexCjs.SubCategoryLink, {
leftIcon: "edit",
href: links.START_WEDDING_WEBSITE
}, "Start your website"), /*#__PURE__*/_react.default.createElement(_indexCjs.SubCategoryLink, {
leftIcon: "color_palette",
href: links.START_WEDDING_WEBSITE
}, "Browse website designs"));
const guestViewUrl = links.generateGuestViewUrl(slug);
const publishedLinks = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_indexCjs.SubCategoryLink, {
leftIcon: "edit",
href: links.PREVIEW_WEBSITE
}, "Edit website"), /*#__PURE__*/_react.default.createElement(_indexCjs.SubCategoryLink, {
leftIcon: "settings",
href: links.DASHBOARD_WWS
}, "Manage website"), /*#__PURE__*/_react.default.createElement(_indexCjs.SubCategoryLink, {
leftIcon: "linkout",
href: guestViewUrl,
target: "_blank"
}, "View website"));
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_indexCjs.LinkColumn, null, /*#__PURE__*/_react.default.createElement(_indexCjs.MainCategoryLinkMenu, {
id: "wedding-website-your-website",
headingContent: "Your website",
href: websiteLink,
isOpenByDefault: true
}, hasWeddingWebsite ? publishedLinks : unPublishedWebsiteLinks)), /*#__PURE__*/_react.default.createElement(_indexCjs.LinkColumn, null, /*#__PURE__*/_react.default.createElement(_indexCjs.MainCategoryLinkMenu, {
id: "wedding-website-your-guests-rsvps",
headingContent: "Your guests & RSVPs",
href: links.GUEST_LIST_LOGGED_IN
}, /*#__PURE__*/_react.default.createElement(_indexCjs.SubCategoryLink, {
leftIcon: "guest_couple",
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
}, mobileMedia.yes ? 'Guest messaging' : 'Guest messages'))), /*#__PURE__*/_react.default.createElement(_indexCjs.LinkColumn, null, /*#__PURE__*/_react.default.createElement(_indexCjs.MainCategoryPrimaryLink, {
href: links.FIND_A_COUPLES_REGISTRY
}, "Find a couple's website")));
};
const layouts = {
loggedOut: _layoutsCjs.layout2LinkColsAnd4SmallFeaturedUnits,
loggedInWithoutWeddingWebsite: _layoutsCjs.layout3LinkColsAnd4SmallFeaturedUnits,
loggedInWithWeddingWebsite: _layoutsCjs.layout3LinkColsAnd2SmallFeaturedUnits
};
const WeddingWebsiteMegaMenu = () => {
const {
menuTypes,
links,
loggedIn,
weddingWebsiteData: {
hasWeddingWebsite,
isLoading
}
} = (0, _ContextCjs.useHeaderNavContext)();
let layout;
if (isLoading) {
layout = layouts.loggedInWithoutWeddingWebsite;
} else if (loggedIn) {
layout = hasWeddingWebsite ? layouts.loggedInWithWeddingWebsite : layouts.loggedInWithoutWeddingWebsite;
} else {
layout = layouts.loggedOut;
}
return /*#__PURE__*/_react.default.createElement(_indexCjs.MegaMenu, {
layout: layout,
menuID: menuTypes.WEDDING_WEBSITE,
containerProps: {
'data-trackable-context-group': 'wedding websites'
}
}, isLoading ? /*#__PURE__*/_react.default.createElement(_indexCjs2.default, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_indexCjs.LinkSection, {
headingContent: "Wedding website",
headingTextProps: {
href: hasWeddingWebsite ? links.PREVIEW_WEBSITE : links.WEDDING_WEBSITES
}
}, loggedIn ? /*#__PURE__*/_react.default.createElement(LoggedInLinks, null) : /*#__PURE__*/_react.default.createElement(LoggedOutLinks, null)), /*#__PURE__*/_react.default.createElement(WeddingWebsiteFeaturedSection, null)));
};
var _default = WeddingWebsiteMegaMenu;
exports.default = _default;