npm - @articles-media/articles-dev-box - Versions diffs - 1.0.31 → 1.0.32 - Mend

@articles-media/articles-dev-box 1.0.31 → 1.0.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/README.md +11 -3
package/dist/Ad-BsG4C_lR.js +668 -0
package/dist/Ad.js +2 -2
package/dist/AdConfirmExitModal-heFPJNdX.js +55 -0
package/dist/AdDetailsModal-D2-4lh9e.js +107 -0
package/dist/ArticlesAd.js +15 -10
package/dist/Button-DvEZjsVV.js +32 -0
package/dist/CreditsModal.js +51 -35
package/dist/DarkModeHandler.js +21 -13
package/dist/FriendsList.js +49 -47
package/dist/GameMenu-BD1HSDJ-.js +84 -0
package/dist/GameMenu.js +2 -0
package/dist/GameScoreboard-DVoXXDnM.js +174 -0
package/dist/GameScoreboard.js +2 -2
package/dist/GlobalBody.js +58 -23
package/dist/GlobalHead.js +5 -5
package/dist/Link-CguWJy6y.js +16 -0
package/dist/ReturnToLauncherButton.js +26 -22
package/dist/SessionButton.js +62 -38
package/dist/SettingsModal-yU_TsVYh.js +430 -0
package/dist/SettingsModal.js +2 -2
package/dist/SignInButton.js +21 -17
package/dist/SocketServerUrlHandler.js +14 -10
package/dist/StatusModal-BXRbJQ10.js +84 -0
package/dist/ToontownModeHandler.js +13 -10
package/dist/ViewUserModal-Dgo1C4sR.js +1798 -0
package/dist/ViewUserModal.js +2 -2
package/dist/articles-dev-box.css +498 -2
package/dist/classnames-No-mjhw1.js +66 -0
package/dist/index.js +23 -22
package/dist/numberWithCommas-B0B9bjWC.js +2198 -0
package/dist/typicalZustandStoreExcludes.js +4 -3
package/dist/typicalZustandStoreStateSlice.js +53 -49
package/dist/useAuthSiteStatus-ZK1GbPBV.js +34 -0
package/dist/useFullscreen.js +38 -18
package/dist/useUserDetails.js +17 -16
package/dist/useUserFriends.js +23 -21
package/dist/useUserToken.js +12 -11
package/package.json +2 -1
package/dist/Ad-CFuDgQYL.js +0 -504
package/dist/AdConfirmExitModal-skW9lp88.js +0 -55
package/dist/AdDetailsModal-CdTR2Y9l.js +0 -107
package/dist/Button-sSB4xpOw.js +0 -31
package/dist/GameScoreboard-9GYlLx72.js +0 -165
package/dist/Link-8nSDV4sI.js +0 -16
package/dist/SettingsModal-CiLvMoLW.js +0 -303
package/dist/StatusModal-PG3i9NKf.js +0 -75
package/dist/ViewUserModal-C5gjfuJ5.js +0 -1549
package/dist/classnames-DCsil9eG.js +0 -39
package/dist/numberWithCommas-DSRplpBy.js +0 -1170
package/dist/useAuthSiteStatus-Cj9IjMj7.js +0 -29

package/README.md CHANGED Viewed

@@ -45,6 +45,8 @@ npm run dev
     - Scoreboard for registered games that links with a user's Articles Media account.
 - Ad
     - Articles Ad component that connects with user data.
+- GameMenu
+    - All in one component that handles the sidebar and menu-bar inside a game page.
 - GlobalHead
     - Not used at this time, allows for just <head> related tags to be added to site without other logic.
 - GlobalBody
@@ -72,10 +74,16 @@ npm run dev
 - typicalZustandStoreStateSlice
     - Slice of zustand states that every game normally uses
+# Usage Examples
+For newly developed components I sometimes find myself trying to remember what repos used it. Here is a short list of recent components developed and what project is using it. Doing this until AMPM can search by imports or enough projects adopted the component.
+- typicalZustandStoreExcludes - Catching Game and School Run
+- SessionButton - Catching Game and School Run
+- GameMenu - School Run
 # Roadmap
-⏹️ Remove Bootstrap reliance
+⏹️ Remove Bootstrap reliance?
 ⏹️ Figure out why this package does not work outside webpack, on Turbopack for example it fails. Bootstrap SASS related I think.
 # TODO
-- Bundle SCSS on a component level instead of a project level.
-- Verify I am exporting components the most efficient way.
+- TODO

package/dist/Ad-BsG4C_lR.js ADDED Viewed

@@ -0,0 +1,668 @@
+import { n as __toESM, t as require_classnames } from "./classnames-No-mjhw1.js";
+import { t as ArticlesButton } from "./Button-DvEZjsVV.js";
+import { t as Link } from "./Link-CguWJy6y.js";
+import { n as ArticlesDate, o as toDate, r as minutesToMilliseconds, s as millisecondsInMinute, t as numberWithCommas } from "./numberWithCommas-B0B9bjWC.js";
+import * as React from "react";
+import { lazy, memo, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import useSWR from "swr";
+//#region node_modules/date-fns/_lib/getRoundingMethod.js
+function getRoundingMethod(method) {
+	return (number) => {
+		const result = (method ? Math[method] : Math.trunc)(number);
+		return result === 0 ? 0 : result;
+	};
+}
+//#endregion
+//#region node_modules/date-fns/differenceInMilliseconds.js
+/**
+* @name differenceInMilliseconds
+* @category Millisecond Helpers
+* @summary Get the number of milliseconds between the given dates.
+*
+* @description
+* Get the number of milliseconds between the given dates.
+*
+* @param laterDate - The later date
+* @param earlierDate - The earlier date
+*
+* @returns The number of milliseconds
+*
+* @example
+* // How many milliseconds are between
+* // 2 July 2014 12:30:20.600 and 2 July 2014 12:30:21.700?
+* const result = differenceInMilliseconds(
+*   new Date(2014, 6, 2, 12, 30, 21, 700),
+*   new Date(2014, 6, 2, 12, 30, 20, 600)
+* )
+* //=> 1100
+*/
+function differenceInMilliseconds(laterDate, earlierDate) {
+	return +toDate(laterDate) - +toDate(earlierDate);
+}
+//#endregion
+//#region node_modules/date-fns/differenceInMinutes.js
+/**
+* The {@link differenceInMinutes} function options.
+*/
+/**
+* @name differenceInMinutes
+* @category Minute Helpers
+* @summary Get the number of minutes between the given dates.
+*
+* @description
+* Get the signed number of full (rounded towards 0) minutes between the given dates.
+*
+* @param dateLeft - The later date
+* @param dateRight - The earlier date
+* @param options - An object with options.
+*
+* @returns The number of minutes
+*
+* @example
+* // How many minutes are between 2 July 2014 12:07:59 and 2 July 2014 12:20:00?
+* const result = differenceInMinutes(
+*   new Date(2014, 6, 2, 12, 20, 0),
+*   new Date(2014, 6, 2, 12, 7, 59)
+* )
+* //=> 12
+*
+* @example
+* // How many minutes are between 10:01:59 and 10:00:00
+* const result = differenceInMinutes(
+*   new Date(2000, 0, 1, 10, 0, 0),
+*   new Date(2000, 0, 1, 10, 1, 59)
+* )
+* //=> -1
+*/
+function differenceInMinutes(dateLeft, dateRight, options) {
+	const diff = differenceInMilliseconds(dateLeft, dateRight) / millisecondsInMinute;
+	return getRoundingMethod(options?.roundingMethod)(diff);
+}
+var observerMap = /* @__PURE__ */ new Map();
+var RootIds = /* @__PURE__ */ new WeakMap();
+var rootId = 0;
+var unsupportedValue;
+function getRootId(root) {
+	if (!root) return "0";
+	if (RootIds.has(root)) return RootIds.get(root);
+	rootId += 1;
+	RootIds.set(root, rootId.toString());
+	return RootIds.get(root);
+}
+function optionsToId(options) {
+	return Object.keys(options).sort().filter((key) => options[key] !== void 0).map((key) => {
+		return `${key}_${key === "root" ? getRootId(options.root) : options[key]}`;
+	}).toString();
+}
+function createObserver(options) {
+	const id = optionsToId(options);
+	let instance = observerMap.get(id);
+	if (!instance) {
+		const elements = /* @__PURE__ */ new Map();
+		let thresholds;
+		const observer = new IntersectionObserver((entries) => {
+			entries.forEach((entry) => {
+				var _a2;
+				const inView = entry.isIntersecting && thresholds.some((threshold) => entry.intersectionRatio >= threshold);
+				if (options.trackVisibility && typeof entry.isVisible === "undefined") entry.isVisible = inView;
+				(_a2 = elements.get(entry.target)) == null || _a2.forEach((callback) => {
+					callback(inView, entry);
+				});
+			});
+		}, options);
+		thresholds = observer.thresholds || (Array.isArray(options.threshold) ? options.threshold : [options.threshold || 0]);
+		instance = {
+			id,
+			observer,
+			elements
+		};
+		observerMap.set(id, instance);
+	}
+	return instance;
+}
+function observe(element, callback, options = {}, fallbackInView = unsupportedValue) {
+	if (typeof window.IntersectionObserver === "undefined" && fallbackInView !== void 0) {
+		const bounds = element.getBoundingClientRect();
+		callback(fallbackInView, {
+			isIntersecting: fallbackInView,
+			target: element,
+			intersectionRatio: typeof options.threshold === "number" ? options.threshold : 0,
+			time: 0,
+			boundingClientRect: bounds,
+			intersectionRect: bounds,
+			rootBounds: bounds
+		});
+		return () => {};
+	}
+	const { id, observer, elements } = createObserver(options);
+	const callbacks = elements.get(element) || [];
+	if (!elements.has(element)) elements.set(element, callbacks);
+	callbacks.push(callback);
+	observer.observe(element);
+	return function unobserve() {
+		callbacks.splice(callbacks.indexOf(callback), 1);
+		if (callbacks.length === 0) {
+			elements.delete(element);
+			observer.unobserve(element);
+		}
+		if (elements.size === 0) {
+			observer.disconnect();
+			observerMap.delete(id);
+		}
+	};
+}
+React.Component;
+function useInView({ threshold, delay, trackVisibility, rootMargin, root, triggerOnce, skip, initialInView, fallbackInView, onChange } = {}) {
+	var _a2;
+	const [ref, setRef] = React.useState(null);
+	const callback = React.useRef(onChange);
+	const lastInViewRef = React.useRef(initialInView);
+	const [state, setState] = React.useState({
+		inView: !!initialInView,
+		entry: void 0
+	});
+	callback.current = onChange;
+	React.useEffect(() => {
+		if (lastInViewRef.current === void 0) lastInViewRef.current = initialInView;
+		if (skip || !ref) return;
+		let unobserve;
+		unobserve = observe(ref, (inView, entry) => {
+			const previousInView = lastInViewRef.current;
+			lastInViewRef.current = inView;
+			if (previousInView === void 0 && !inView) return;
+			setState({
+				inView,
+				entry
+			});
+			if (callback.current) callback.current(inView, entry);
+			if (entry.isIntersecting && triggerOnce && unobserve) {
+				unobserve();
+				unobserve = void 0;
+			}
+		}, {
+			root,
+			rootMargin,
+			threshold,
+			trackVisibility,
+			delay
+		}, fallbackInView);
+		return () => {
+			if (unobserve) unobserve();
+		};
+	}, [
+		Array.isArray(threshold) ? threshold.toString() : threshold,
+		ref,
+		root,
+		rootMargin,
+		triggerOnce,
+		skip,
+		trackVisibility,
+		fallbackInView,
+		delay
+	]);
+	const entryTarget = (_a2 = state.entry) == null ? void 0 : _a2.target;
+	const previousEntryTarget = React.useRef(void 0);
+	if (!ref && entryTarget && !triggerOnce && !skip && previousEntryTarget.current !== entryTarget) {
+		previousEntryTarget.current = entryTarget;
+		setState({
+			inView: !!initialInView,
+			entry: void 0
+		});
+		lastInViewRef.current = initialInView;
+	}
+	const result = [
+		setRef,
+		state.inView,
+		state.entry
+	];
+	result.ref = result[0];
+	result.inView = result[1];
+	result.entry = result[2];
+	return result;
+}
+var _a;
+((_a = React.useInsertionEffect) != null ? _a : React.useLayoutEffect) != null || React.useEffect;
+//#endregion
+//#region src/hooks/Ads/useAd.js
+var fetcher$1 = async (data) => {
+	if (process.env.NODE_ENV === "development") try {
+		const params = new URLSearchParams({
+			ad_id: data.ad_id,
+			user_ad_token: data.user_ad_token
+		}).toString();
+		return (await (await fetch(`http://localhost:3001/api/ads/${data.ad_id}?${params}`)).json()).result;
+	} catch (err) {}
+	const params = new URLSearchParams({ ad_id: data.ad_id }).toString();
+	return fetch(`${data.url}?${params}`).then((res) => res.json()).then((json) => json.result);
+};
+var options$1 = {
+	dedupingInterval: 1e3 * 60 * 60,
+	errorRetryInterval: 1e3 * 60 * 5
+};
+var useAd = (ad_id, user_ad_token) => {
+	const { data, error, isLoading, mutate } = useSWR(ad_id ? {
+		url: `https://articles.media/api/ads/${ad_id}`,
+		ad_id,
+		user_ad_token
+	} : null, fetcher$1, options$1);
+	return {
+		data,
+		error,
+		isLoading,
+		mutate
+	};
+};
+//#endregion
+//#region src/hooks/Ads/useAds.js
+var fetcher = async (data) => {
+	if (process.env.NODE_ENV === "development") try {
+		return await (await fetch("http://localhost:3001/api/ads")).json();
+	} catch (err) {}
+	return fetch(data.url).then((res) => res.json());
+};
+var minutes = 60;
+var options = {
+	dedupingInterval: minutesToMilliseconds(minutes),
+	focusThrottleInterval: minutesToMilliseconds(minutes),
+	errorRetryInterval: 1e3 * 60 * 5
+};
+var useAds = (params) => {
+	const { data, error, isLoading, mutate } = useSWR(params?.loading || params?.disabled ? null : { url: `https://articles.media/api/ads` }, fetcher, options);
+	return {
+		data,
+		error,
+		isLoading,
+		mutate
+	};
+};
+//#endregion
+//#region src/components/Ads/Ad.jsx
+var import_classnames = /* @__PURE__ */ __toESM(require_classnames(), 1);
+var AdDetailsModal = lazy(() => import("./AdDetailsModal-D2-4lh9e.js"));
+var AdConfirmExitModal = lazy(() => import("./AdConfirmExitModal-heFPJNdX.js"));
+function generateRandomInteger(min, max) {
+	return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+function Ad(props) {
+	let { previewMode, darkMode, user_ad_token, userDetails, userDetailsLoading, prepend, append } = props;
+	const userReduxState = false;
+	const viewedAds = [];
+	const [adId, setAdId] = useState(null);
+	const { data: ads, isLoading: adsIsLoading, mutate: adsMutate } = useAds({
+		loading: userDetailsLoading,
+		disabled: userDetails?.articles_membership?.status == "Active"
+	});
+	const { data: ad, isLoading: adIsLoading } = useAd(adId, user_ad_token);
+	let previewData = props.previewData || {};
+	const [randomAdId, setRandomAdId] = useState(null);
+	const [promoId, setPromoId] = useState(null);
+	const [promo, setPromo] = useState(null);
+	const [promoIndex, setPromoIndex] = useState(0);
+	const [modalShow, setModalShow] = useState(false);
+	const [adDetailsExpanded, setAdDetailsExpanded] = useState(false);
+	const [confirmAdExitModal, setConfirmAdExitModal] = useState(false);
+	const [selectedDate, handleDateChange] = useState(/* @__PURE__ */ new Date());
+	const [loggedEvents, setLoggedEvents] = useState([]);
+	useEffect(() => {
+		if (!ads) return;
+		if (ads?.length > 0 && !adId) {
+			console.log("Ad Mounted or reduxAds changed");
+			setAdId(props.ad_id || ads[generateRandomInteger(0, ads?.length - 1)]?._id);
+		}
+	}, [ads]);
+	useEffect(() => {}, [ad]);
+	useEffect(() => {
+		if (ad?.populated_promos && promoIndex >= 0) setPromo(ad?.populated_promos[promoIndex]);
+	}, [promoIndex, ad]);
+	function adDetailsExpandedToggle() {
+		setAdDetailsExpanded(!adDetailsExpanded);
+	}
+	const { ref, inView, entry } = useInView({
+		threshold: 0,
+		triggerOnce: true
+	});
+	function logEvent(event) {
+		if (previewMode) console.log("Preventing this event from being logged as this ad is being shown in preview mode.");
+		if (loggedEvents.find((obj) => obj == event)) {
+			console.log("Already logged this event");
+			return;
+		}
+		const params = new URLSearchParams({
+			ad_id: ad?._id,
+			event
+		}).toString();
+		fetch(`/api/ads/event?${params}`).then(function(response) {
+			return response.json();
+		}).then(function(data) {
+			setLoggedEvents([...loggedEvents, event]);
+			console.log(data);
+		}).catch(function(error) {
+			console.log(error);
+		});
+	}
+	useEffect(() => {
+		if (!previewMode) {
+			console.log("inView", inView);
+			if (inView && adId) {
+				let unexpiredRecentViews = [{
+					ad_id: adId,
+					date: (/* @__PURE__ */ new Date()).toString()
+				}, ...viewedAds.filter((obj) => {
+					console.log(differenceInMinutes(/* @__PURE__ */ new Date(), new Date(obj.date)));
+					if (differenceInMinutes(/* @__PURE__ */ new Date(), new Date(obj.date)) > 5) {
+						console.log("adsViewed - Remove Old Ad View Object");
+						return;
+					} else {
+						console.log("adsViewed - Keep Ad View Object");
+						return obj;
+					}
+				})];
+				console.log("unexpiredRecentViews", unexpiredRecentViews);
+			}
+		}
+	}, [inView, adId]);
+	const [adsAvoided, setAdsAvoided] = useState(null);
+	const [adsAvoidedLoading, setAdsAvoidedLoading] = useState(false);
+	function logAdAvoided() {
+		setAdsAvoidedLoading(true);
+		console.log("logAdAvoided called", user_ad_token);
+		const url = process.env.NODE_ENV === "development" ? "http://localhost:3001/api/user/advertising/avoided" : `https://articles.media/api/user/advertising/avoided`;
+		const params = new URLSearchParams({ user_id: userDetails?._id }).toString();
+		fetch(`${url}?${params}`, { headers: { "x-articles-api-key": user_ad_token } }).then(function(response) {
+			return response.json();
+		}).then(function(data) {
+			setAdsAvoidedLoading(false);
+			setAdsAvoided(data.avoided_count);
+			console.log(data);
+		}).catch(function(error) {
+			console.log(error);
+			setAdsAvoidedLoading(false);
+		});
+	}
+	useEffect(() => {
+		if (!previewMode) {
+			console.log("inView", inView);
+			if (userDetails?.articles_membership?.status == "Active" && inView) logAdAvoided("Ad Avoided");
+		}
+	}, [inView, userDetails]);
+	if (userDetailsLoading) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: (0, import_classnames.default)("ad-wrap", { "active-member": userDetails?.articles_membership?.status == "Active" }),
+		style: {
+			"--articles-ad-background-color": previewData.background_color || ad?.background_color,
+			"--articles-ad-font-color": previewData.font_color || ad?.font_color,
+			"--articles-ad-border-color": previewData.border_color || ad?.border_color
+		},
+		children: [
+			adDetailsExpanded && /* @__PURE__ */ jsx(AdDetailsModal, {
+				setModalShow: setAdDetailsExpanded,
+				ad,
+				previewData
+			}),
+			confirmAdExitModal && /* @__PURE__ */ jsx(AdConfirmExitModal, {
+				setModalShow: setConfirmAdExitModal,
+				ad,
+				previewData
+			}),
+			prepend && /* @__PURE__ */ jsx("div", {
+				className: "prepend-container",
+				children: prepend
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "ad",
+				children: [userDetails?.articles_membership?.status !== "Active" && /* @__PURE__ */ jsxs("div", {
+					className: "main-panel",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "ad-warning flex-header",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "",
+								children: [ad?.city && "Local", " Advertisement"]
+							})
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "content-wrap",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "photo-banner",
+								children: [
+									/* @__PURE__ */ jsx("div", {
+										className: "logo",
+										children: (previewData.logo?.location || ad?.logo?.location) && /* @__PURE__ */ jsx("img", {
+											src: previewData?.logo?.key ? `${process.env.NEXT_PUBLIC_CDN}${previewData?.logo?.key}` : `${process.env.NEXT_PUBLIC_CDN}${ad?.logo?.key}`,
+											alt: ""
+										})
+									}),
+									/* @__PURE__ */ jsx("div", {
+										className: "icon d-none",
+										children: /* @__PURE__ */ jsx("i", { className: "fas fa-mug-hot" })
+									}),
+									/* @__PURE__ */ jsx("img", {
+										className: "photo",
+										src: previewData?.background?.key ? `${process.env.NEXT_PUBLIC_CDN}${previewData.background?.key}` : `${process.env.NEXT_PUBLIC_CDN}${ad?.background?.key}`,
+										alt: ""
+									})
+								]
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "details-wrap",
+								children: [
+									/* @__PURE__ */ jsxs("div", {
+										className: "detail-title",
+										children: [/* @__PURE__ */ jsx("div", {
+											className: "detail",
+											children: /* @__PURE__ */ jsx("span", {
+												className: "h4",
+												children: previewData?.business || ad?.business
+											})
+										}), /* @__PURE__ */ jsxs("div", {
+											className: "flex flex-column d-none",
+											children: [/* @__PURE__ */ jsxs("div", {
+												className: "detail",
+												children: [/* @__PURE__ */ jsx("span", {
+													className: "icon",
+													children: /* @__PURE__ */ jsx("i", { className: "fas fa-search-location" })
+												}), /* @__PURE__ */ jsxs("span", { children: [
+													ad?.city,
+													", ",
+													ad?.state
+												] })]
+											}), /* @__PURE__ */ jsxs("div", {
+												className: "detail",
+												children: [/* @__PURE__ */ jsx("span", {
+													className: "icon",
+													children: /* @__PURE__ */ jsx("i", { className: "fas fa-clock me-2" })
+												}), /* @__PURE__ */ jsx("span", { children: "6:30AM–8PM" })]
+											})]
+										})]
+									}),
+									ad?.city && /* @__PURE__ */ jsx("div", { className: "details mb-3 d-none" }),
+									/* @__PURE__ */ jsx("div", {
+										className: "short-description",
+										children: previewData?.description || ad?.description
+									})
+								]
+							})]
+						}),
+						userReduxState?.roles?.isDev && ad?.populated_promos?.length > 0 && /* @__PURE__ */ jsxs("div", { children: [promo && /* @__PURE__ */ jsx("div", {
+							className: "promos-wrap",
+							children: promo && /* @__PURE__ */ jsxs("div", {
+								className: "promo-wrap d-flex justify-content-between align-items-center mx-2 p-1 px-2 border border-2 border-light mb-0",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "",
+									children: [/* @__PURE__ */ jsx("div", { children: promo.title }), /* @__PURE__ */ jsx("div", {
+										className: "small",
+										children: /* @__PURE__ */ jsx("div", {
+											className: "small",
+											children: promo.details
+										})
+									})]
+								}), /* @__PURE__ */ jsx(ArticlesButton, {
+									className: "px-3",
+									small: true,
+									onClick: () => {
+										console.log("Load Save Modal");
+										setModalShow(true);
+									},
+									children: "Save"
+								})]
+							}, promo._id)
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "d-flex justify-content-between",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "px-2",
+								children: [ad?.populated_promos?.length, " Promos Active"]
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "controls",
+								children: [
+									/* @__PURE__ */ jsx("i", {
+										className: "fad fa-arrow-circle-left",
+										type: "button",
+										onClick: () => {
+											if (promoIndex == 0) setPromoIndex(ad?.populated_promos?.length - 1);
+											else setPromoIndex((prev) => prev - 1);
+										}
+									}),
+									ad?.populated_promos?.map((obj, obj_i) => /* @__PURE__ */ jsx("i", { className: `fa-square ${obj_i == promoIndex ? "fad" : "fas"}` }, obj._id)),
+									/* @__PURE__ */ jsx("i", {
+										className: "fad fa-arrow-circle-right",
+										type: "button",
+										onClick: () => {
+											if (promoIndex == ad?.populated_promos?.length - 1) setPromoIndex(0);
+											else setPromoIndex((prev) => prev + 1);
+										}
+									})
+								]
+							})]
+						})] }),
+						/* @__PURE__ */ jsx("hr", {
+							style: { borderColor: "white" },
+							className: "mt-auto mb-0"
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "action-wrap d-flex justify-content-lg-between px-3 py-2",
+							children: [
+								/* @__PURE__ */ jsx("div", {
+									onClick: () => {
+										adDetailsExpandedToggle();
+										logEvent("Details");
+									},
+									className: "action flex-grow-1 flex-shrink-0",
+									children: "Details"
+								}),
+								/* @__PURE__ */ jsx("span", { className: "px-4" }),
+								/* @__PURE__ */ jsx("a", {
+									className: "action flex-grow-1 flex-shrink-0",
+									href: ad?.website,
+									target: "_blank",
+									rel: "noreferrer",
+									onClick: (e) => {
+										e.preventDefault();
+										setConfirmAdExitModal(true);
+										logEvent("Confirm Exit Modal Opened");
+									},
+									children: /* @__PURE__ */ jsx("div", { children: "Website" })
+								})
+							]
+						})
+					]
+				}), userDetails?.articles_membership?.status == "Active" && /* @__PURE__ */ jsx("div", {
+					className: "main-panel",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "content-wrap",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "photo-banner",
+							children: [
+								/* @__PURE__ */ jsx("div", { className: "logo" }),
+								/* @__PURE__ */ jsxs("div", {
+									className: "splash",
+									children: [/* @__PURE__ */ jsx("i", { className: "fas fa-broadcast-tower" }), /* @__PURE__ */ jsxs("div", {
+										className: "text",
+										children: [/* @__PURE__ */ jsx("div", {
+											className: "count",
+											children: adsAvoidedLoading ? /* @__PURE__ */ jsx("i", { className: "fas fa-spinner fa-spin me-0" }) : adsAvoided ? numberWithCommas(adsAvoided) : 0
+										}), /* @__PURE__ */ jsx("div", {
+											className: "label",
+											children: "ads avoided."
+										})]
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "member-since",
+									children: ["Member since: ", /* @__PURE__ */ jsx(ArticlesDate, {
+										format: "PP",
+										date: userDetails?.articles_membership?.membership_started
+									})]
+								})
+							]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "details-wrap",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "detail-title",
+								children: /* @__PURE__ */ jsx("div", {
+									className: "detail",
+									children: /* @__PURE__ */ jsx("span", {
+										className: "h4",
+										children: "Thanks for the support!"
+									})
+								})
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "short-description",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "mb-2",
+									children: "Without support from users like you, we wouldn't be here."
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "links-list",
+									children: [
+										/* @__PURE__ */ jsxs(Link, {
+											newPage: true,
+											className: "link-item",
+											href: "https://articles.media/messages",
+											children: [/* @__PURE__ */ jsx("i", { className: "fas fa-comments-alt" }), "0 unread messages."]
+										}),
+										/* @__PURE__ */ jsxs(Link, {
+											newPage: true,
+											className: "link-item",
+											href: "https://articles.media/settings/notifications",
+											onClick: () => {
+												logAdAvoided();
+											},
+											children: [/* @__PURE__ */ jsx("i", { className: "fas fa-bell" }), "0 notifications."]
+										}),
+										/* @__PURE__ */ jsxs(Link, {
+											newPage: true,
+											className: "link-item",
+											href: "https://articles.media/settings/account",
+											children: [/* @__PURE__ */ jsx("i", { className: "fas fa-cog" }), "Manage account settings."]
+										})
+									]
+								})]
+							})]
+						})]
+					})
+				})]
+			}),
+			append && /* @__PURE__ */ jsx("div", {
+				className: "append-container",
+				children: append
+			}),
+			!previewMode && /* @__PURE__ */ jsx("div", {
+				className: "advertise-with-us p-1",
+				style: {
+					backgroundColor: previewData.background_color || ad?.background_color,
+					color: previewData.font_color || ad?.font_color,
+					borderColor: previewData.border_color || ad?.border_color
+				},
+				children: /* @__PURE__ */ jsxs(Link, {
+					className: "small d-block w-100 text-center",
+					href: "https://articles.media/advertising",
+					newPage: true,
+					children: [/* @__PURE__ */ jsx("i", { className: "fas fa-share me-1" }), "Advertise with Articles Media!"]
+				})
+			})
+		]
+	});
+}
+var Ad_default = memo(Ad);
+//#endregion
+export { Ad_default as t };

package/dist/Ad.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as e } from "./Ad-CFuDgQYL.js";
-export { e as default };
+import { t as Ad_default } from "./Ad-BsG4C_lR.js";
+export { Ad_default as default };