@abcagency/hc-ui-components 1.3.69 → 1.3.71

package/src/components/modules/buttons/button-group-apply.js

@@ -5,10 +5,14 @@ import Button from '~/components/modules/buttons/default';
 import ApplyDialog from '../dialogs/apply-dialog';
 
 const ButtonGroupApply = ({
+	useDetailsPostMessage,
+	navigateToDetails,
+	navigateToEasyApply,
 	Link,
 	linkFormat,
 	easyApplyUrl,
 	applyNowText = 'Apply Now',
+	isIframe,
 	detailsUrl,
 	detailsText = 'View Details',
 	easyApplyText,
@@ -29,6 +33,10 @@ const ButtonGroupApply = ({
 		//console.log('calling trackApplyNow');
 		trackEvent(eventTypes.APPLY_NOW_CLICKED, { jobCategory: item.fields.category, jobCategoryClass: item.fields.categoryClass, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
 	};
+	const trackApplyOpen = () => {
+		//console.log('calling trackApplyOpen');
+		trackEvent(eventTypes.APPLY_OPEN_CLICKED, { jobCategory: item.fields.category, jobCategoryClass: item.fields.categoryClass, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
+	};
 	const trackEasyApply = () => {
 		//console.log('calling trackEasyApply');
 		trackEvent(eventTypes.EASY_APPLY_CLICKED, { jobCategory: item.fields.category, jobCategoryClass: item.fields.categoryClass, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
@@ -37,10 +45,7 @@ const ButtonGroupApply = ({
 		//console.log('calling trackViewDetails');
 		trackEvent(eventTypes.VIEW_DETAILS_CLICKED, { jobCategory: item.fields.category, jobCategoryClass: item.fields.categoryClass, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
 	};
-	// console.log(detailsUrl);
-	// console.log(useDetailsPostMessage);
-	// console.log(navigateToDetails);
-	// console.log(useDetailsPostMessage === true && !navigateToDetails, 'query result');
+
 	return (
 		<nav
 			className={twMerge`
@@ -65,7 +70,9 @@ const ButtonGroupApply = ({
 					variant={detailsButtonVariant}
 					className={"map-details-button"}
 					size={buttonSize}
-					onClick={trackViewDetails}
+					execOnClick={trackViewDetails}
+					isIframe={isIframe}
+					iframeMsgType={"DETAILS_LINK"}
 				>
 					{detailsText}
 				</Button.Anchor>
@@ -77,18 +84,20 @@ const ButtonGroupApply = ({
 					variant={applyButtonVariant}
 					size={buttonSize}
 					className={"map-apply-now-button"}
-					onClick={trackApplyNow}
+					execOnClick={trackApplyNow}
+					isIframe={isIframe}
+					iframeMsgType={"APPLY_NOW_LINK"}
 				>
 					{applyNowText}
 				</Button.Anchor>
 			}
 			{item.applyOnline == 1 && item.applyUrl && includeDialog &&
-				<ApplyDialog applyUrl={item.applyUrl} internalApplyLink={internalApplyLink} companyName={companyName}>
+				<ApplyDialog applyUrl={item.applyUrl} internalApplyLink={internalApplyLink} companyName={companyName} item={item} trackEvent={trackEvent} eventTypes={eventTypes}>
 					<Button.Anchor
 						variant={applyButtonVariant}
 						size={buttonSize}
 						className={"map-apply-now-button"}
-						onClick={trackApplyNow} // TODO: Move event to popup
+						execOnClick={trackApplyOpen}
 					>
 						{applyNowText}
 					</Button.Anchor>
@@ -100,7 +109,9 @@ const ButtonGroupApply = ({
 					variant={applyButtonVariant}
 					size={buttonSize}
 					className={"map-apply-now-button"}
-					onClick={trackEasyApply}
+					execOnClick={trackEasyApply}
+					isIframe={isIframe}
+					iframeMsgType={"EASY_APPLY_LINK"}
 				>
 					{easyApplyText}
 				</Button.Anchor>

package/src/components/modules/buttons/default.js

@@ -1,194 +1,202 @@
-import React from 'react';
-import { forwardRef } from 'react';
-import { Link } from 'react-router-dom';
-import { twMerge } from 'tailwind-merge';
-
-import Icon from '~/components/modules/icon';
-
-const linkDefaultClasses = "hc-normal-case hc-text-inherit !hc-font-[inherit] hc-[font-weight:inherit] !hc-p-0 hc-rounded-none";
-const underlineClasses = "!underline decoration-1 underline-offset-2 hover:!no-underline focus:!no-underline";
-
-const ButtonVariant = {
-	none: '',
-	primary: 'hc-bg-primary hc-border hc-border-primary hc-text-white hover:hc-bg-opacity-70 focus:hc-bg-opacity-70',
-	secondary: 'hc-bg-secondary hc-border hc-border-secondary hc-text-white hover:hc-bg-opacity-70 focus:hc-bg-opacity-70',
-	outline: 'hc-bg-transparent hc-border hc-border-primary hc-text-primary hover:hc-bg-primaryDark hover:hc-border-primaryDark hover:hc-text-white focus:hc-bg-primaryDark focus:hc-border-primaryDark focus:hc-text-white',
-	link: `${linkDefaultClasses} hc-text-primary hover:hc-text-uiText focus:hc-text-uiText`,
-	icon: 'hc-opacity-100 hover:hc-opacity-70 focus:hc-opacity-70'
-};
-
-const ButtonSize = {
-	none: '',
-	default: 'hc-py-2 hc-px-6 hc-text-base',
-	sq: 'hc-p-2.5',
-	sqsm: 'hc-p-1',
-	xs: 'hc-py-1.5 hc-px-3 hc-text-xs',
-	sm: 'hc-py-1.5 hc-px-4 hc-text-sm',
-	lg: 'hc-py-4 hc-px-10 hc-text-lg'
-};
-
-const ButtonDefaults = {
-	style: 'hc-group hc-font-medium hc-uppercase hc-text-center hc-rounded hc-transition',
-	size: ButtonSize.default,
-	variant: ButtonVariant.primary,
-	block: 'hc-block hc-w-full'
-};
-
-const linkVariants = variant => variant === 'link';
-
-const buttonClasses = (variant, size, isBlock, hasUnderline, className) => twMerge(
-	isBlock ? ButtonDefaults.block : linkVariants(variant) ? 'hc-inline' : 'hc-inline-block',
-	ButtonDefaults.style,
-	variant ? ButtonVariant[variant] : ButtonDefaults.variant,
-	size ? ButtonSize[size] : ButtonDefaults.size,
-	hasUnderline ? underlineClasses : '',
-	className ?? ''
-);
-
-const Button = ({
-	children
-}) => {
-	return (
-		{ children }
-	);
-};
-
-export const Anchor = ({
-	children,
-	href,
-	className,
-	size,
-	variant,
-	isBlock,
-	hasUnderline,
-	target = '_blank',
-	...rest
-}) => {
-	return (
-		<a
-			href={href}
-			target={target}
-			className={buttonClasses(variant, size, isBlock, hasUnderline, className)}
-			onClick={href === '#' ? e => {
-				e.preventDefault();
-			} : null}
-			{...rest}
-		>
-			{children}
-		</a>
-	);
-};
-
-export const AnchorLink = ({
-	children,
-	Link,
-	href,
-	className,
-	size,
-	variant,
-	isBlock,
-	hasUnderline,
-	...rest
-}) => {
-	return (
-		<Link
-			href={href}
-			className={`
-				${buttonClasses(variant, size, isBlock, hasUnderline, className)}
-			`}
-			{...rest}
-		>
-			{children}
-		</Link>
-	);
-};
-
-export const ScrollAnchor = forwardRef((props, ref) => {
-	const {
-		children,
-		href,
-		className,
-		size,
-		variant,
-		isBlock,
-		hasUnderline,
-		...rest
-	} = props;
-
-	return (
-		<Link
-			ref={ref}
-			href={`#${href}`}
-			scroll={false}
-			className={buttonClasses(variant, size, isBlock, hasUnderline, className)}
-			{...rest}
-		>
-			{children}
-		</Link>
-	);
-});
-
-export const Btn = forwardRef((props, ref) => {
-	const {
-		children,
-		type = 'button',
-		className,
-		size,
-		variant,
-		isBlock,
-		hasUnderline,
-		...rest
-	} = props;
-	return (
-		<button
-			ref={ref}
-			type={type}
-			className={buttonClasses(variant, size, isBlock, hasUnderline, className)}
-			{...rest}
-		>
-			{children}
-		</button>
-	);
-});
-
-export const ButtonBody = ({
-	children,
-	className
-}) => {
-	return (
-		<span
-			className={twMerge(
-				'hc-inline-flex hc-w-full hc-items-center hc-justify-between hc-gap-1.5',
-				className ?? ''
-			)}
-		>
-			{children}
-		</span>
-	);
-};
-
-export const ButtonIcon = ({
-	icon,
-	size = 'hc-size-4',
-	className
-}) => {
-	return (
-		<Icon
-
-			icon={icon}
-			size={size}
-			className={className ?? ''}
-		/>
-	);
-};
-
-Button.Anchor = Anchor;
-Button.Link = AnchorLink;
-Button.Scroll = ScrollAnchor;
-Button.Btn = Btn;
-Button.Body = ButtonBody;
-Button.Icon = ButtonIcon;
-
-Btn.displayName = 'Button:Button';
-ScrollAnchor.displayName = 'Button:ScrollAnchor';
-export default Button;
+import React from 'react';
+import { forwardRef } from 'react';
+import { Link } from 'react-router-dom';
+import { twMerge } from 'tailwind-merge';
+
+import Icon from '~/components/modules/icon';
+
+const linkDefaultClasses = "hc-normal-case hc-text-inherit !hc-font-[inherit] hc-[font-weight:inherit] !hc-p-0 hc-rounded-none";
+const underlineClasses = "!underline decoration-1 underline-offset-2 hover:!no-underline focus:!no-underline";
+
+const ButtonVariant = {
+	none: '',
+	primary: 'hc-bg-primary hc-border hc-border-primary hc-text-white hover:hc-bg-opacity-70 focus:hc-bg-opacity-70',
+	secondary: 'hc-bg-secondary hc-border hc-border-secondary hc-text-white hover:hc-bg-opacity-70 focus:hc-bg-opacity-70',
+	outline: 'hc-bg-transparent hc-border hc-border-primary hc-text-primary hover:hc-bg-primaryDark hover:hc-border-primaryDark hover:hc-text-white focus:hc-bg-primaryDark focus:hc-border-primaryDark focus:hc-text-white',
+	link: `${linkDefaultClasses} hc-text-primary hover:hc-text-uiText focus:hc-text-uiText`,
+	icon: 'hc-opacity-100 hover:hc-opacity-70 focus:hc-opacity-70'
+};
+
+const ButtonSize = {
+	none: '',
+	default: 'hc-py-2 hc-px-6 hc-text-base',
+	sq: 'hc-p-2.5',
+	sqsm: 'hc-p-1',
+	xs: 'hc-py-1.5 hc-px-3 hc-text-xs',
+	sm: 'hc-py-1.5 hc-px-4 hc-text-sm',
+	lg: 'hc-py-4 hc-px-10 hc-text-lg'
+};
+
+const ButtonDefaults = {
+	style: 'hc-group hc-font-medium hc-uppercase hc-text-center hc-rounded hc-transition',
+	size: ButtonSize.default,
+	variant: ButtonVariant.primary,
+	block: 'hc-block hc-w-full'
+};
+
+const linkVariants = variant => variant === 'link';
+
+const buttonClasses = (variant, size, isBlock, hasUnderline, className) => twMerge(
+	isBlock ? ButtonDefaults.block : linkVariants(variant) ? 'hc-inline' : 'hc-inline-block',
+	ButtonDefaults.style,
+	variant ? ButtonVariant[variant] : ButtonDefaults.variant,
+	size ? ButtonSize[size] : ButtonDefaults.size,
+	hasUnderline ? underlineClasses : '',
+	className ?? ''
+);
+
+const Button = ({
+	children
+}) => {
+	return (
+		{ children }
+	);
+};
+
+const postMessage = (href, msgType) => {
+	window.parent.postMessage({ href: href, type: msgType }, "*");
+};
+
+export const Anchor = ({
+	children,
+	href,
+	className,
+	size,
+	variant,
+	isBlock,
+	hasUnderline,
+	target = '_blank',
+	execOnClick = null,
+	isIframe = false,
+	iframeMsgType,
+	...rest
+}) => {
+	return (
+		<a
+			href={href}
+			target={target}
+			className={buttonClasses(variant, size, isBlock, hasUnderline, className)}
+			onClick={isIframe ? e => {
+				e.preventDefault();
+				execOnClick();
+				postMessage(href, iframeMsgType);
+			} : href === '#' ? e => { e.preventDefault(); execOnClick(); } : execOnClick}
+			{...rest}
+		>
+			{children}
+		</a>
+	);
+};
+
+export const AnchorLink = ({
+	children,
+	Link,
+	href,
+	className,
+	size,
+	variant,
+	isBlock,
+	hasUnderline,
+	...rest
+}) => {
+	return (
+		<Link
+			href={href}
+			className={`
+				${buttonClasses(variant, size, isBlock, hasUnderline, className)}
+			`}
+			{...rest}
+		>
+			{children}
+		</Link>
+	);
+};
+
+export const ScrollAnchor = forwardRef((props, ref) => {
+	const {
+		children,
+		href,
+		className,
+		size,
+		variant,
+		isBlock,
+		hasUnderline,
+		...rest
+	} = props;
+
+	return (
+		<Link
+			ref={ref}
+			href={`#${href}`}
+			scroll={false}
+			className={buttonClasses(variant, size, isBlock, hasUnderline, className)}
+			{...rest}
+		>
+			{children}
+		</Link>
+	);
+});
+
+export const Btn = forwardRef((props, ref) => {
+	const {
+		children,
+		type = 'button',
+		className,
+		size,
+		variant,
+		isBlock,
+		hasUnderline,
+		...rest
+	} = props;
+	return (
+		<button
+			ref={ref}
+			type={type}
+			className={buttonClasses(variant, size, isBlock, hasUnderline, className)}
+			{...rest}
+		>
+			{children}
+		</button>
+	);
+});
+
+export const ButtonBody = ({
+	children,
+	className
+}) => {
+	return (
+		<span
+			className={twMerge(
+				'hc-inline-flex hc-w-full hc-items-center hc-justify-between hc-gap-1.5',
+				className ?? ''
+			)}
+		>
+			{children}
+		</span>
+	);
+};
+
+export const ButtonIcon = ({
+	icon,
+	size = 'hc-size-4',
+	className
+}) => {
+	return (
+		<Icon
+			icon={icon}
+			size={size}
+			className={className ?? ''}
+		/>
+	);
+};
+
+Button.Anchor = Anchor;
+Button.Link = AnchorLink;
+Button.Scroll = ScrollAnchor;
+Button.Btn = Btn;
+Button.Body = ButtonBody;
+Button.Icon = ButtonIcon;
+
+Btn.displayName = 'Button:Button';
+ScrollAnchor.displayName = 'Button:ScrollAnchor';
+export default Button;

package/src/components/modules/buttons/items-pill.js

@@ -1,31 +1,31 @@
-import React from 'react';
-import { forwardRef } from 'react';
-
-import Button from '~/components/modules/buttons/default';
-
-export const ButtonItemsPill = forwardRef((
-	{
-		className,
-		activeItemsCount,
-		...props
-	},
-	ref
-) => {
-	return (
-		<Button.Btn
-			ref={ref}
-			size="none"
-			variant="none"
-			className={`hc-capitalize
-				hc-relative hc-z-[2] hc-group hc-inline-flex hc-items-center hc-gap-px hc-ml-auto hc-mr-1.5 hc-pl-1.5 hc-pr-1 hc-py-0.5 hc-rounded hc-bg-primary/10 hc-text-xs hc-font-bold hc-text-primary hc-ring-1 hc-ring-inset hc-ring-primary/20
-				${className ?? ''}
-			`}
-			{...props}
-		>
-			Clear
-		</Button.Btn>
-	);
-});
-
-ButtonItemsPill.displayName = 'ButtonItemsPill';
-export default ButtonItemsPill;
+import React from 'react';
+import { forwardRef } from 'react';
+
+import Button from '~/components/modules/buttons/default';
+
+export const ButtonItemsPill = forwardRef((
+	{
+		className,
+		activeItemsCount,
+		...props
+	},
+	ref
+) => {
+	return (
+		<Button.Btn
+			ref={ref}
+			size="none"
+			variant="none"
+			className={`hc-capitalize
+				hc-relative hc-z-[2] hc-group hc-inline-flex hc-items-center hc-gap-px hc-ml-auto hc-mr-1.5 hc-pl-1.5 hc-pr-1 hc-py-0.5 hc-rounded hc-bg-primary/10 hc-text-xs hc-font-bold hc-text-primary hc-ring-1 hc-ring-inset hc-ring-primary/20
+				${className ?? ''}
+			`}
+			{...props}
+		>
+			Clear
+		</Button.Btn>
+	);
+});
+
+ButtonItemsPill.displayName = 'ButtonItemsPill';
+export default ButtonItemsPill;

package/src/components/modules/buttons/pill-wrapper.js

@@ -1,27 +1,27 @@
-import React, { forwardRef } from 'react';
-
-import Button from '~/components/modules/buttons/default';
-
-export const PillWrapper = forwardRef((
-	{
-		className,
-		children,
-		...props
-	},
-	ref
-) => {
-	return (
-		<Button.Btn
-			ref={ref}
-			size="none"
-			variant="none"
-			className={`hc-relative hc-group hc-inline-flex hc-items-center hc-gap-px hc-ml-auto hc-mr-1.5 hc-pl-1.5 hc-pr-1 hc-py-0.5 hc-rounded hc-bg-primary/10 hc-text-xs hc-font-bold hc-text-primary hc-ring-1 hc-ring-inset hc-ring-primary/20 ${className}`}
-			{...props}
-		>
-			{children}
-		</Button.Btn>
-	);
-});
-
-PillWrapper.displayName = 'PillWrapper';
-export default PillWrapper;
+import React, { forwardRef } from 'react';
+
+import Button from '~/components/modules/buttons/default';
+
+export const PillWrapper = forwardRef((
+	{
+		className,
+		children,
+		...props
+	},
+	ref
+) => {
+	return (
+		<Button.Btn
+			ref={ref}
+			size="none"
+			variant="none"
+			className={`hc-relative hc-group hc-inline-flex hc-items-center hc-gap-px hc-ml-auto hc-mr-1.5 hc-pl-1.5 hc-pr-1 hc-py-0.5 hc-rounded hc-bg-primary/10 hc-text-xs hc-font-bold hc-text-primary hc-ring-1 hc-ring-inset hc-ring-primary/20 ${className}`}
+			{...props}
+		>
+			{children}
+		</Button.Btn>
+	);
+});
+
+PillWrapper.displayName = 'PillWrapper';
+export default PillWrapper;

package/src/components/modules/buttons/show-all-button.js

@@ -1,19 +1,19 @@
-import React from 'react';
-
-const ShowAllButton = ({ mapInteracted, setMapInteracted, fitBounds, mapRef, pinIconUrl, setSelectedFilters, setQuery, listingCount }) => {
-	if (!mapInteracted) {
-		return null;
-	}
-	return (
-		<button
-			style={{ fontFamily: 'Roboto, Arial, sans-serif', fontSize: '14px', fontWeight: '500' }}
-			className="hc-absolute hc-bottom-10 hc-left-2.5 hc-z-10 hc-flex hc-items-center hc-justify-center hc-pl-2 hc-pb-1 hc-pt-1.5 hc-pr-3 hc-bg-white hc-text-black hc-border-none hc-rounded-full hc-shadow hc-cursor-pointer hc-text-sm hc-font-medium"
-			onClick={() => { setMapInteracted(false); fitBounds(mapRef.current, true); if (listingCount < 2) { setSelectedFilters({}); setQuery(null); }; }}
-		>
-			<img src={pinIconUrl} alt="Pin Icon" className="hc-size-5" />
-			Show All
-		</button>
-	);
-};
-
-export default ShowAllButton;
+import React from 'react';
+
+const ShowAllButton = ({ mapInteracted, setMapInteracted, fitBounds, mapRef, pinIconUrl, setSelectedFilters, setQuery, listingCount }) => {
+	if (!mapInteracted) {
+		return null;
+	}
+	return (
+		<button
+			style={{ fontFamily: 'Roboto, Arial, sans-serif', fontSize: '14px', fontWeight: '500' }}
+			className="hc-absolute hc-bottom-10 hc-left-2.5 hc-z-10 hc-flex hc-items-center hc-justify-center hc-pl-2 hc-pb-1 hc-pt-1.5 hc-pr-3 hc-bg-white hc-text-black hc-border-none hc-rounded-full hc-shadow hc-cursor-pointer hc-text-sm hc-font-medium"
+			onClick={() => { setMapInteracted(false); fitBounds(mapRef.current, true); if (listingCount < 2) { setSelectedFilters({}); setQuery(null); }; }}
+		>
+			<img src={pinIconUrl} alt="Pin Icon" className="hc-size-5" />
+			Show All
+		</button>
+	);
+};
+
+export default ShowAllButton;