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