@abcagency/hc-ui-components 1.3.59 → 1.3.61

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

@@ -1,135 +1,115 @@
-import React from 'react';
-import { twMerge } from 'tailwind-merge';
-
-import Button from '~/components/modules/buttons/default';
-import ApplyDialog from '../dialogs/apply-dialog';
-
-const ButtonGroupApply = ({
-	applyUrl,
-	useDetailsPostMessage,
-	navigateToDetails,
-	navigateToEasyApply,
-	Link,
-	linkFormat,
-	applyText = 'Apply Now',
-	detailsUrl,
-	detailsText = 'View Details',
-	className,
-	buttonSize = 'sm',
-	applyButtonVariant = 'primary',
-	detailsButtonVariant = 'outline',
-	includeDialog = false,
-	internalApplyLink,
-	itemId,
-	item,
-	companyName,
-	trackEvent,
-	eventTypes
-}) => {
-	const href = linkFormat.replace('[slug]', item.slug ?? item.id);
-
-	const trackApply = () => {
-		trackEvent(eventTypes.APPLY_NOW_CLICKED, { jobTitle: item.fields.position, jobCategory: item.fields.category, entityDisplayName: item?.mapDetails?.entityDisplayName });
-	};
-
-	const trackViewDetails = () => {
-		trackEvent(eventTypes.VIEW_DETAILS_CLICKED, { jobTitle: item.fields.position, jobCategory: item.fields.category, entityDisplayName: item?.mapDetails?.entityDisplayName });
-	};
-	console.log(detailsUrl);
-	console.log(useDetailsPostMessage);
-	console.log(navigateToDetails);
-	console.log(useDetailsPostMessage === true && !navigateToDetails, 'query result');
-	return (
-		<nav
-			className={twMerge`
-        hc-flex hc-flex-row hc-justify-between hc-gap-2 hc-w-full
-        ${className ?? ''}
-      `}
-		>
-			{Link ? (
-				<Button.Link
-					Link={Link}
-					href={href}
-					variant={detailsButtonVariant}
-					size={buttonSize}
-					className={"map-details-button"}
-					onClick={trackViewDetails}
-				>
-					{detailsText}
-				</Button.Link>
-			) : navigateToDetails ? (
-				<Button.Anchor
-					href={href}
-					onClick={e => {
-						e.preventDefault();
-						navigateToDetails(item);
-						trackViewDetails();
-					}}
-					variant={detailsButtonVariant}
-					className={"map-details-button"}
-					size={buttonSize}
-				>
-					{detailsText}
-				</Button.Anchor>
-			) : detailsUrl && useDetailsPostMessage !== true ? (
-				<Button.Anchor
-					href={detailsUrl}
-					variant={detailsButtonVariant}
-					className={"map-details-button"}
-					size={buttonSize}
-					onClick={trackViewDetails}
-				>
-					{detailsText}
-				</Button.Anchor>
-			) : useDetailsPostMessage === true ? (
-				<Button.Btn
-					onClick={() => {
-						trackViewDetails();
-						window.parent.postMessage({ itemId: itemId, type: 'LISTING_ID' }, '*');
-					}}
-					variant={detailsButtonVariant}
-					className={"map-details-button"}
-					size={buttonSize}
-				>
-					{detailsText}
-				</Button.Btn>
-			) : null}
-
-			{applyUrl && !includeDialog && navigateToEasyApply == null &&
-        <Button.Anchor
-        	href={applyUrl}
-        	variant={applyButtonVariant}
-        	size={buttonSize}
-        	className={"map-apply-now-button"}
-        	onClick={trackApply}
-        >
-        	{applyText}
-        </Button.Anchor>
-			}
-			{applyUrl && !includeDialog && navigateToEasyApply != null &&
-        <Button.Btn
-        	onClick={() => { navigateToEasyApply(item); trackApply(); }}
-        	variant={applyButtonVariant}
-        	className={"map-apply-now-button"}
-        	size={buttonSize}
-        >
-        	{applyText}
-        </Button.Btn>
-			}
-			{applyUrl && includeDialog &&
-        <ApplyDialog applyUrl={applyUrl} internalApplyLink={internalApplyLink} companyName={companyName}>
-        	<Button.Anchor
-        		variant={applyButtonVariant}
-        		size={buttonSize}
-        		className={"map-apply-now-button"}
-        		onClick={trackApply}
-        	>
-        		{applyText}
-        	</Button.Anchor>
-        </ApplyDialog>
-			}
-		</nav>
-	);
-};
-
-export default ButtonGroupApply;
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import Button from '~/components/modules/buttons/default';
+import ApplyDialog from '../dialogs/apply-dialog';
+
+const ButtonGroupApply = ({
+	useDetailsPostMessage,
+	navigateToDetails,
+	navigateToEasyApply,
+	Link,
+	linkFormat,
+	easyApplyUrl,
+	applyNowText = 'Apply Now',
+	detailsUrl,
+	detailsText = 'View Details',
+	easyApplyText,
+	className,
+	buttonSize = 'sm',
+	applyButtonVariant = 'primary',
+	detailsButtonVariant = 'outline',
+	includeDialog = false,
+	internalApplyLink,
+	item,
+	companyName,
+	trackEvent,
+	eventTypes
+}) => {
+	const href = linkFormat.replace('[slug]', item.slug ?? item.id);
+
+	const trackApplyNow = () => {
+		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 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 });
+	};
+	const trackViewDetails = () => {
+		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`
+        hc-flex hc-flex-row hc-justify-between hc-gap-2 hc-w-full
+        ${className ?? ''}
+      `}
+		>
+			{Link ? (
+				<Button.Link
+					Link={Link}
+					href={href}
+					variant={detailsButtonVariant}
+					size={buttonSize}
+					className={"map-details-button"}
+					sendEvent = {trackViewDetails}
+				>
+					{detailsText}
+				</Button.Link>
+			) : detailsUrl ? (
+				<Button.Anchor
+					href={detailsUrl}
+					variant={detailsButtonVariant}
+					className={"map-details-button"}
+					size={buttonSize}
+					onClick={trackViewDetails}
+				>
+					{detailsText}
+				</Button.Anchor>
+			) : null}
+
+			{item.applyOnline == 1 && item.applyUrl && !includeDialog &&
+				<Button.Anchor
+					href={item.applyUrl}
+					variant={applyButtonVariant}
+					size={buttonSize}
+					className={"map-apply-now-button"}
+					onClick={trackApplyNow}
+				>
+					{applyNowText}
+				</Button.Anchor>
+			}
+			{item.applyOnline == 1 && item.applyUrl && includeDialog &&
+				<ApplyDialog applyUrl={item.applyUrl} internalApplyLink={internalApplyLink} companyName={companyName}>
+					<Button.Anchor
+						variant={applyButtonVariant}
+						size={buttonSize}
+						className={"map-apply-now-button"}
+						onClick={trackApplyNow} // TODO: Move event to popup
+					>
+						{applyNowText}
+					</Button.Anchor>
+				</ApplyDialog>
+			}
+			{item.easyApply == 1 && easyApplyUrl &&
+				<Button.Anchor
+					href={`${easyApplyUrl}${item.id}`}
+					variant={applyButtonVariant}
+					size={buttonSize}
+					className={"map-apply-now-button"}
+					onClick={trackEasyApply}
+				>
+					{easyApplyText}
+				</Button.Anchor>
+			}
+		</nav>
+	);
+};
+
+export default ButtonGroupApply;

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

@@ -1,22 +1,22 @@
-import React from 'react';
-
-import Icon from '~/components/modules/icon';
-import PillWrapper from '~/components/modules/buttons/pill-wrapper';
-
-const CommutePill = ({ travelTime }) => {
-	if (!travelTime) return;
-	return (
-		<div className="pt-2">
-			<PillWrapper >
-				<Icon
-					icon="ri:pin-distance-fill"
-					size="hc-size-5"
-					className="hc-text-uiAccent/30"
-				/>
-				commute time = {travelTime}
-			</PillWrapper>
-		</div>
-	);
-};
-
-export default CommutePill;
+import React from 'react';
+
+import Icon from '~/components/modules/icon';
+import PillWrapper from '~/components/modules/buttons/pill-wrapper';
+
+const CommutePill = ({ travelTime }) => {
+	if (!travelTime) return;
+	return (
+		<div className="pt-2">
+			<PillWrapper >
+				<Icon
+					icon="ri:pin-distance-fill"
+					size="hc-size-5"
+					className="hc-text-uiAccent/30"
+				/>
+				commute time = {travelTime}
+			</PillWrapper>
+		</div>
+	);
+};
+
+export default CommutePill;