@xo-union/tk-component-header-nav
Version:
182 lines • 8.43 kB
JavaScript
import React from "react";
import { MegaMenu, LinkSection, MainCategoryLinkMenu, FeaturedSection, FeaturedUnitCard, LinkColumn, SubCategoryLink, MainCategorySecondaryLink } from "../../MegaMenu/index.js";
import { useHeaderNavContext } from "../../Context.js";
import { layout3LinkColsAnd2SmallFeaturedUnits, layout4LinkColsAnd4SmallFeaturedUnits } from "../layouts.js";
import { MainCategoryPrimaryLink } from "../../MegaMenu/LinkSection.js";
const VendorCategoriesFeaturedSection = () => {
const {
links,
imageIds
} = useHeaderNavContext();
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FeaturedUnitCard, {
linkUrl: links.WEDDING_LOCATIONS,
imageId: imageIds.WEDDING_LOCATIONS,
copy: "Find one-of-a-kind wedding locations",
linkProps: {
'data-trackable-vendor-category-code': 'REC'
}
}), /*#__PURE__*/React.createElement(FeaturedUnitCard, {
linkUrl: links.PHOTOGRAPHERS,
imageId: imageIds.PHOTOGRAPHERS,
copy: "Wedding photographers",
linkProps: {
'data-trackable-vendor-category-code': 'WPH'
}
}), /*#__PURE__*/React.createElement(FeaturedUnitCard, {
linkUrl: links.VENDOR_REVIEWS,
imageId: imageIds.VENDOR_REVIEWS,
copy: "Write a review",
linkProps: {
'data-trackable-vendor-category-code': 'WRE'
}
}), /*#__PURE__*/React.createElement(FeaturedUnitCard, {
linkUrl: links.WEDDING_PLANNERS,
imageId: imageIds.WEDDING_PLANNERS,
copy: "Wedding planners",
linkProps: {
'data-trackable-vendor-category-code': 'WPL'
}
}));
};
const LoggedInLinks = () => {
const {
links
} = useHeaderNavContext();
return /*#__PURE__*/React.createElement(LinkColumn, null, /*#__PURE__*/React.createElement(MainCategoryLinkMenu, {
headingContent: "Your vendors",
href: links.VENDOR_MANAGER,
id: "vendors-your-vendors",
isOpenByDefault: true
}, /*#__PURE__*/React.createElement(SubCategoryLink, {
leftIcon: "vendors",
href: links.VENDOR_MANAGER
}, "Vendor manager"), /*#__PURE__*/React.createElement(SubCategoryLink, {
leftIcon: "chat",
href: links.INBOX
}, "Vendor inbox"), /*#__PURE__*/React.createElement(SubCategoryLink, {
leftIcon: "star",
href: links.VENDOR_REVIEWS
}, "Vendor reviews")));
};
const VendorsCategoriesLinks = () => {
const {
links,
loggedIn,
classes
} = useHeaderNavContext();
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LinkColumn, null, /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
"data-trackable-vendor-category-code": "REC",
href: links.RECEPTION_VENUES
}, "Reception venues"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.PHOTOGRAPHERS,
"data-trackable-vendor-category-code": "WPH"
}, "Wedding photographers"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.CATERING,
"data-trackable-vendor-category-code": "CAT"
}, "Catering"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.BRIDAL_SALONS,
"data-trackable-vendor-category-code": "BWP"
}, "Bridal salons"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.WEDDING_PLANNERS,
"data-trackable-vendor-category-code": "PLN"
}, "Wedding planners"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.WEDDING_CAKES,
"data-trackable-vendor-category-code": "WCK"
}, "Wedding cakes"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.REHEARSAL_DINNERS_SHOWERS_VENDORS,
"data-trackable-vendor-category-code": "SPV"
}, "Rehearsal dinners, bridal showers & parties"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.DJS,
"data-trackable-vendor-category-code": "DJS"
}, "DJs"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.VIDEOGRAPHERS,
"data-trackable-vendor-category-code": "VID"
}, "Videographers")), /*#__PURE__*/React.createElement(LinkColumn, null, /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.WEDDING_RENTALS,
"data-trackable-vendor-category-code": "RNT"
}, "Wedding rentals"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.BEAUTY_SERVICES,
"data-trackable-vendor-category-code": "BEA"
}, "Beauty services"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.FLORISTS,
"data-trackable-vendor-category-code": "FLO"
}, "Florists"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.WEDDING_BANDS,
"data-trackable-vendor-category-code": "BDS"
}, "Wedding bands"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.OFFICIANTS,
"data-trackable-vendor-category-code": "OPC"
}, "Officiants & pre-marital counseling"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.PHOTO_BOOTHS,
"data-trackable-vendor-category-code": "PHB"
}, "Photo booths"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.BAR_SERVICES,
"data-trackable-vendor-category-code": "BAR"
}, "Bar services"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.TRANSPORTATION,
"data-trackable-vendor-category-code": "TRA"
}, "Transportation"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.JEWELERS,
"data-trackable-vendor-category-code": "JWL"
}, "Jewelers")), /*#__PURE__*/React.createElement(LinkColumn, null, /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.SOLOISTS_ENSEMBLES,
"data-trackable-vendor-category-code": "ENS"
}, "Soloists & ensembles"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.DANCE_LESSONS,
"data-trackable-vendor-category-code": "DNC"
}, "Dance lessons"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.DECOR_VENDORS,
"data-trackable-vendor-category-code": "DEC"
}, "D\xE9cor"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.INVITATIONS_VENDORS,
"data-trackable-vendor-category-code": "INV"
}, "Invitations"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.FAVORS_GIFTS_VENDORS,
"data-trackable-vendor-category-code": "FAV"
}, "Favors & gifts"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.TRAVEL_SPECIALISTS,
"data-trackable-vendor-category-code": "TRV"
}, "Travel specialists"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
href: links.EXTERNAL_HOTEL_ROOM_BLOCKS,
"data-trackable-vendor-category-code": "HRB"
}, "Hotel room blocks"), /*#__PURE__*/React.createElement(MainCategorySecondaryLink, {
hide: "desktop",
rightIcon: "forward",
href: links.MARKETPLACE
}, "See all categories"), !loggedIn && /*#__PURE__*/React.createElement(MainCategoryPrimaryLink, {
href: links.EXTERNAL_FOR_VENDORS,
pushSelfDown: "desktop",
"data-trackable": "",
className: classes['vendor-cta-link']
}, /*#__PURE__*/React.createElement("span", null, "Are you a vendor?", ' ', /*#__PURE__*/React.createElement("span", {
className: classes['vendor-cta-text']
}, "Start here")))));
};
const layouts = {
loggedIn: layout4LinkColsAnd4SmallFeaturedUnits,
loggedOut: layout3LinkColsAnd2SmallFeaturedUnits
};
const VendorsMegaMenu = () => {
const {
links,
loggedIn,
menuTypes
} = useHeaderNavContext();
const layout = loggedIn ? layouts.loggedIn : layouts.loggedOut;
return /*#__PURE__*/React.createElement(MegaMenu, {
menuID: menuTypes.VENDORS,
containerProps: {
'data-trackable-context-group': 'local vendors'
},
layout: layout
}, /*#__PURE__*/React.createElement(LinkSection, {
headingContent: "Vendors",
headingTextProps: {
href: links.MARKETPLACE
},
menuID: menuTypes.VENDORS
}, loggedIn && /*#__PURE__*/React.createElement(LoggedInLinks, null), /*#__PURE__*/React.createElement(VendorsCategoriesLinks, null)), /*#__PURE__*/React.createElement(FeaturedSection, {
headingContent: "Build your vendor team"
}, /*#__PURE__*/React.createElement(VendorCategoriesFeaturedSection, null)));
};
export default VendorsMegaMenu;