@quintype/arrow 3.54.1-debug-full-bleed.4 → 3.54.1-version-upgrade.1

package/src/utils/utils.js

@@ -0,0 +1,615 @@
+import get from "lodash/get";
+import camelCase from "lodash.camelcase";
+import kebabCase from "lodash.kebabcase";
+import PropTypes from "prop-types";
+import upperCase from "lodash/upperCase";
+import Timeago from "react-timeago";
+import React from "react";
+import lowerCase from "lodash/lowerCase";
+import format from "date-fns-tz/format";
+import utcToZonedTime from "date-fns-tz/utcToZonedTime";
+import { Dot } from "../components/Atoms/Dot/dot";
+import { Divider } from "../components/Atoms/Divider/";
+import { STORY_TEMPLATES } from "../constants";
+import formatDistanceToNowStrict from "date-fns/formatDistanceToNowStrict";
+import { useSelector } from "react-redux";
+import { timeZoneData } from "../components/Fixture/timezone";
+import { LOCALES } from "./dateFnsLocales";
+
+const canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
+
+export const sharePageUrl = canUseDOM && window.location.href;
+
+export function truncate(string = "", limit = 60, ellipsis = true) {
+  const putEllipsis = ellipsis ? " ..." : "";
+  return typeof string === "string" && string.length > limit ? string.substring(0, limit) + putEllipsis : string;
+}
+
+export const timestampToFormat = (
+  value,
+  unit,
+  suffix,
+  timestamp,
+  config = {},
+  languageCode = "en-IN",
+  enableTimeZoneAbbr = false,
+  timezone
+) => {
+  const {
+    showTime = false,
+    isTimeFirst = false,
+    isUpperCase = false,
+    disableMeridiem = false,
+    dateFormat,
+    localizedMeridiem,
+    localizedMonths,
+    direction = "ltr"
+  } = config;
+  const monthList = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  const dateTime = new Date(timestamp);
+  let date;
+  let month;
+  let year;
+
+  if (enableTimeZoneAbbr) {
+    const zonedTime = timezone && utcToZonedTime(dateTime, timezone);
+    const formatZonedTime = zonedTime && format(zonedTime, "yyyy-MM-dd HH:mm:ss zzz", { timeZone: timezone });
+    const [datePart] = formatZonedTime.split(" ");
+    const [zonedYear, zonedMonth, zonedDate] = datePart.split("-");
+    date = zonedDate;
+    month = monthList[parseInt(zonedMonth, 10) - 1];
+    year = zonedYear;
+  } else {
+    date = dateTime
+      .getDate()
+      .toString()
+      .padStart(2, 0);
+    month = monthList[dateTime.getMonth()];
+    year = dateTime.getFullYear();
+  }
+
+  let localizedMonth = month;
+
+  if (isUpperCase) {
+    localizedMonth = upperCase(month);
+  }
+
+  const rtlWithoutCustomLabels = direction === "rtl" && !localizedMeridiem && !localizedMonths;
+
+  const timeWithLocalizedMeridiem = formatAMPM(
+    timestamp,
+    languageCode,
+    config,
+    isTimeFirst,
+    timezone,
+    enableTimeZoneAbbr
+  );
+
+  let timetoShow = "";
+  let rtlTimetoShow = "";
+
+  if (showTime) {
+    timetoShow = `, ${timeWithLocalizedMeridiem}`;
+    if (isTimeFirst && rtlWithoutCustomLabels) {
+      rtlTimetoShow = `${timeWithLocalizedMeridiem}`;
+    } else rtlTimetoShow = `${timeWithLocalizedMeridiem} ,`;
+  }
+
+  if (localizedMonths) {
+    localizedMonth = get(localizedMonths, [lowerCase(month)]) || month;
+  }
+  const localizedDate = date.toLocaleString(languageCode);
+  const localizedYear = year.toLocaleString(languageCode).replace(/,/g, "");
+
+  if (disableMeridiem) {
+    return `${localizedMonth} ${localizedDate}, ${localizedYear}`;
+  } else if (isTimeFirst) {
+    if (rtlWithoutCustomLabels) {
+      return `${localizedYear} ${localizedMonth} ${localizedDate}, ${rtlTimetoShow}`;
+    }
+    return `${timeWithLocalizedMeridiem}, ${localizedDate} ${localizedMonth} ${localizedYear}`;
+  } else if (dateFormat === "mon-dd-yyyy") {
+    if (rtlWithoutCustomLabels) {
+      return `${rtlTimetoShow}${localizedYear} ,${localizedDate} ${localizedMonth}`;
+    }
+    return `${localizedMonth} ${localizedDate}, ${localizedYear}${timetoShow}`;
+  } else {
+    if (rtlWithoutCustomLabels) {
+      return `${rtlTimetoShow}${localizedYear} ${localizedMonth} ${localizedDate}`;
+    }
+    return `${localizedDate} ${localizedMonth} ${localizedYear}${timetoShow}`;
+  }
+};
+
+export function automaticTimeTranslation({ date, languageCode }) {
+  const dateToFormat = new Date(date);
+  const locale = LOCALES[languageCode] || LOCALES["enUS"];
+  const timeDistance = formatDistanceToNowStrict(dateToFormat, {
+    locale,
+    addSuffix: true,
+    includeSeconds: true
+  });
+  return timeDistance;
+}
+
+export function formatter(value, unit, suffix, date, config = {}, languageCode, isLocalizedNumber) {
+  const showDateForUnits = ["day", "week", "month", "year"];
+  // suffix here refers to ago
+  // unit here refers to seconds, minute, minutes,...
+  const localizedSuffix = get(config, ["localizedPublishTime", suffix]) || suffix;
+  let localizedUnitOfTime;
+
+  const localeDateLanguageCode = isLocalizedNumber ? languageCode : "en";
+
+  const timeFormatObj = {
+    time: value.toLocaleString(localeDateLanguageCode),
+    unit: localizedUnitOfTime,
+    ago: localizedSuffix,
+    since: get(config, ["localizedPublishTime", "since"]) || "since"
+  };
+
+  // The time appears in this format that is the reason its a string value
+  const timeAgoFormat = "time unit ago";
+
+  const getFormattedDate = (timeFormat) => {
+    const timeStr = timeAgoFormat.replace(/time|unit|ago|since/gi, (item) => timeFormat[item]);
+    return timeStr;
+  };
+
+  // checking for localized values
+  const localizedValues = get(config, ["localizedPublishTime"], {});
+
+  const keysToCheck = ["ago", "seconds", "minute", "minutes", "hour", "hours"];
+  const isLocalizedValues = !keysToCheck.some((key) => localizedValues[key]);
+
+  // custom labels toggle is disabled and label values are not present
+  const isNotLocalized = !config.enableLocalization && !isLocalizedValues;
+
+  // custom labels toggle is disabled and label values are present
+  const isNotLocalizedButHasLocalizedValues = !config.enableLocalization && isLocalizedValues;
+
+  // custom labels toggle is enabled and label values are present
+  const isLocalizedAndHasLocalizedValues = config.enableLocalization && isLocalizedValues;
+
+  // showing automatic time translation from date-fns library based on the localized values
+  const showTimeTranslation =
+    config.enableTimeTranslation &&
+    (isNotLocalized || isNotLocalizedButHasLocalizedValues || isLocalizedAndHasLocalizedValues);
+
+  // This condition passes when unit is either day/week/month/year. eg: 4 months ago
+  if ((unit === "hour" && value > 23) || showDateForUnits.indexOf(unit) !== -1) {
+    return timestampToFormat(value, unit, suffix, date, config, localeDateLanguageCode, isLocalizedNumber);
+  }
+  // Primary unit is a unit in singular form like second/ minute /hour
+  const primaryUnit = get(config, ["localizedPublishTime", unit]) || unit;
+
+  // Secondary unit is a unit in plural form like seconds/ minutes/ hours
+  const secondaryUnit = get(config, ["localizedPublishTime", `${unit}s`]) || `${unit}s`;
+
+  // Checking to show unit in singular form or plural form
+  // Value is the numeric value of time. Eg: In 1 hour ago, 1 is the value.
+  localizedUnitOfTime = value > 1 ? secondaryUnit : primaryUnit;
+  timeFormatObj["unit"] = localizedUnitOfTime;
+
+  return showTimeTranslation ? automaticTimeTranslation({ date, languageCode }) : getFormattedDate(timeFormatObj);
+}
+
+function formatAMPM(timestamp, languageCode, config, isTimeFirst, timezone, enableTimeZoneAbbr = false) {
+  const { timeFormat = "12hours", localizedZeroToPad, direction = "ltr", localizedMonths, localizedMeridiem } = config;
+  const dateTime = new Date(timestamp);
+  let hours;
+  let minutes;
+  if (enableTimeZoneAbbr) {
+    const zonedTime = timezone && utcToZonedTime(dateTime, timezone);
+    const formatZonedTime = zonedTime && format(zonedTime, "yyyy-MM-dd HH:mm:ss zzz", { timeZone: timezone });
+    const timePart = formatZonedTime.split(" ")[1];
+    [hours, minutes] = timePart.split(":");
+  } else {
+    hours = dateTime.getHours();
+    minutes = dateTime.getMinutes();
+    const padZero = typeof languageCode === "string" && languageCode.startsWith("en") ? "0" : localizedZeroToPad;
+    minutes = minutes < 10 ? padZero + minutes.toLocaleString(languageCode) : minutes.toLocaleString(languageCode);
+  }
+
+  if (timeFormat === "24hours") {
+    //  'en-GB' formats the time in 24-hours format
+    if (enableTimeZoneAbbr) {
+      return `${hours}:${minutes}`;
+    }
+    return dateTime.toLocaleTimeString("en-GB", {
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+  }
+
+  const ampm = hours >= 12 ? "pm" : "am";
+  hours = hours % 12;
+  hours = hours || 12;
+  let updatedAmPm = ampm.toLocaleString(languageCode);
+
+  if (localizedMeridiem) {
+    const { am = "am", pm = "pm" } = localizedMeridiem;
+    updatedAmPm = ampm.toLocaleString(languageCode) === "am" ? am || "am" : pm || "pm";
+  }
+
+  if (direction === "rtl" && !localizedMeridiem && !localizedMonths) {
+    if (isTimeFirst) {
+      const strTime = hours.toLocaleString(languageCode) + ":" + minutes + " " + updatedAmPm;
+      return strTime;
+    }
+    const strTime = updatedAmPm + " " + hours.toLocaleString(languageCode) + ":" + minutes;
+    return strTime;
+  }
+  const strTime = hours.toLocaleString(languageCode) + ":" + minutes + " " + updatedAmPm;
+  return strTime;
+}
+
+export const hexToRGB = (hex) => {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return { r, g, b };
+};
+
+export const getLuminanceOfColor = (hex) => {
+  const { r, g, b } = hexToRGB(hex);
+  return r * 0.299 + g * 0.587 + b * 0.114;
+};
+
+export const rgbToHex = (color = "rgba(255, 255, 255, 0)") => {
+  let rgba = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
+  return rgba && rgba.length === 4
+    ? "#" +
+        ("0" + parseInt(rgba[1], 10).toString(16)).slice(-2) +
+        ("0" + parseInt(rgba[2], 10).toString(16)).slice(-2) +
+        ("0" + parseInt(rgba[3], 10).toString(16)).slice(-2)
+    : color;
+};
+
+const clientWidths = {
+  mobile: 767,
+  tablet: 1024
+};
+
+export const clientWidth = (device) => {
+  const foundDeviceWidth = get(clientWidths, device);
+  if (foundDeviceWidth) {
+    return get(global, "document.documentElement.clientWidth") <= foundDeviceWidth;
+  }
+  return false;
+};
+
+export const getTextColor = (theme = "rgb(255,255,255)") => {
+  const isRegexCheck = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(theme);
+  const getHexValue = !isRegexCheck ? rgbToHex(theme) : theme;
+  const textColor = getLuminanceOfColor(getHexValue) < 155 ? "light" : "dark";
+  return textColor;
+};
+
+export function getNumberOfStoriesToShow(numberOfStoriesToShow) {
+  return numberOfStoriesToShow ? parseInt(numberOfStoriesToShow) : 1;
+}
+
+export const getSlot = (type, component, storyCallback, collectionCallback) => {
+  switch (type) {
+    case "story":
+      return storyCallback();
+    case "collection":
+      return collectionCallback();
+    default:
+      return component ? component() : null;
+  }
+};
+
+export const getSlug = (collection, config = {}) => {
+  const { magazineSlug = "", isArchivePage = false, "sketches-host": sketchesHost } = config;
+  if (isArchivePage) {
+    return getPath(sketchesHost, `/magazine/archive/${magazineSlug}`);
+  }
+  if (magazineSlug) {
+    return getPath(sketchesHost, `/magazine/${magazineSlug}/${collection.slug}`);
+  }
+  const isSection = collection.template === "section";
+  if (isSection) {
+    const sectionId = get(collection, ["metadata", "section", "0", "id"], "");
+    const { sections } = config;
+    const section = sections && sections.find((section) => section.id === sectionId);
+    return section ? section["section-url"] : getPath(sketchesHost, "/");
+  }
+  return getPath(sketchesHost, `/collection/${collection.slug}`);
+};
+
+export function isExternalStory(story = {}) {
+  const { "story-template": storyTemplate = "", metadata = {} } = story;
+  return storyTemplate === "news-elsewhere" ? get(metadata, ["reference-url"], "") : "";
+}
+
+// Adds target='_blank' attribute to anchor tags if not present
+export const updateContentLinks = (content) => {
+  let updatedContent = content;
+  const anchorTagsList = content.match(/(<a).*?(>)/g);
+  anchorTagsList &&
+    anchorTagsList.forEach((anchorTag) => {
+      const isTargetPresent = /target=/g.test(anchorTag);
+      if (!isTargetPresent) {
+        updatedContent = updatedContent.replace(
+          anchorTag,
+          `<a aria-label='content' target='_blank'${anchorTag.substring(2)}`
+        );
+      }
+    });
+  return updatedContent;
+};
+
+export const isEmpty = (value) => {
+  return (
+    value == null || // From standard.js: Always use === - but value == null is allowed to check null || undefined
+    (typeof value === "object" && Object.entries(value).length === 0 && value.constructor === Object) ||
+    (typeof value === "string" && value.trim().length === 0)
+  );
+};
+
+export const shapeConfig = PropTypes.shape({
+  "sketches-host": PropTypes.string,
+  "cdn-name": PropTypes.string,
+  "cdn-image": PropTypes.string
+});
+
+export const shapeStory = PropTypes.shape({
+  headline: PropTypes.string,
+  "last-published-at": PropTypes.number,
+  subheadline: PropTypes.string
+});
+
+export const getStoryUrl = (story, defaultValue = "", queryParam = {}) => {
+  const param = new URLSearchParams(queryParam);
+  const searchParam = param.toString();
+  if (get(story, ["story-template"]) === "news-elsewhere") {
+    const referenceUrl = get(story, ["metadata", "reference-url"], "");
+    return searchParam ? `${referenceUrl}?${searchParam}` : referenceUrl;
+  }
+  const storyUrl = story.url || defaultValue;
+  return searchParam ? `${storyUrl}?${searchParam}` : storyUrl;
+};
+
+export const detectComponent = (component, adComponent, widgetComp) => {
+  const { type } = component;
+  switch (type) {
+    case "ad":
+      return adComponent(component);
+    case "widget":
+      return widgetComp(component);
+    default:
+      return null;
+  }
+};
+
+export const facebookMobileVideoResizeFix = () => {
+  if (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(max-width: 767px)").matches) {
+    const applyFixAfterTime = 3000;
+    const aspectRatioAdjustmentFactor = 0.7;
+    setTimeout(() => {
+      document
+        .querySelectorAll(".story-element-jsembed.story-element-jsembed-facebook-post span")
+        .forEach((element) => {
+          if (!element.classList.contains("fixed-mobile-fb-video")) {
+            element.style.height = `${Math.ceil(element.offsetHeight * aspectRatioAdjustmentFactor)}px`;
+            element.classList.add("fixed-mobile-fb-video");
+          }
+        });
+    }, applyFixAfterTime);
+  }
+};
+
+export const navigateTo = (dispatch, url = "") => {
+  global.app.navigateToPage(dispatch, url);
+};
+
+export const generateNavigateSlug = (collection = {}, config = {}, customUrlPath) => {
+  const { "sketches-host": sketchesHost } = config;
+  if (customUrlPath) {
+    return customUrlPath;
+  }
+  const { magazineSlug = "", isArchivePage = false } = config;
+  if (isArchivePage) {
+    return getPath(sketchesHost, `/magazine/archive/${magazineSlug}`);
+  }
+  if (magazineSlug) {
+    return getPath(sketchesHost, `/magazine/${magazineSlug}/${collection.slug}`);
+  }
+  if (collection) {
+    return getSlug(collection, config);
+  }
+  return getPath(sketchesHost, "/");
+};
+
+export const getCollectionData = async (collectionSlug, mountAtPrefix = "") => {
+  try {
+    const result = await (await fetch(
+      `${mountAtPrefix}/api/v1/collections/${collectionSlug}?item-type=story&limit=6`
+    )).json();
+    return result;
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.error(err);
+  }
+};
+
+export function getAuthorTwitterUrl(author) {
+  const twitterUrl = get(author, ["social", "twitter", "url"], null);
+  const twitterHandle = get(author, ["social", "twitter", "handle"], null);
+
+  if (!author) return "";
+
+  if (twitterUrl) {
+    return twitterUrl;
+  }
+
+  if (twitterHandle && twitterHandle.startsWith("@")) {
+    return `https://www.twitter.com/${twitterHandle.slice(1)}`;
+  }
+
+  if (twitterHandle) {
+    return `https://www.twitter.com/${twitterHandle}`;
+  }
+
+  return "";
+}
+
+export const getTimeStamp = ({
+  date,
+  formatter,
+  config = {},
+  languageCode,
+  isLocalizedNumber,
+  template,
+  timezone = null
+}) => {
+  const isRelatedCollection = get(config, ["isRelatedCollection"], false);
+  if (timezone && template === "story") {
+    const { enableTimeZoneAbbr = false } = useSelector((state) =>
+      get(state, ["qt", "config", "pagebuilder-config", "general"], {})
+    );
+    const zonedTime = timezone && utcToZonedTime(date, timezone);
+    const formatZonedTime = zonedTime && format(zonedTime, "yyyy-MM-dd HH:mm:ss zzz", { timeZone: timezone });
+
+    const localeDateLanguageCode = isLocalizedNumber ? languageCode : "en";
+    const timeStamp = timestampToFormat("", "", "", date, config, localeDateLanguageCode, enableTimeZoneAbbr, timezone);
+    if (enableTimeZoneAbbr) {
+      const timeZone = timeZoneData?.find((tz) => tz.name === timezone);
+      const timeZoneAbbr = timeZone?.abbreviation || "";
+
+      return (
+        <time dateTime={formatZonedTime}>
+          {timeStamp} {timeZoneAbbr}
+        </time>
+      );
+    } else {
+      return <time dateTime={formatZonedTime}>{timeStamp}</time>;
+    }
+  }
+
+  return (
+    <Timeago
+      date={date}
+      component={isRelatedCollection ? "div" : "time"}
+      className="arr__timeago"
+      formatter={(value, unit, suffix, date) => {
+        return formatter(value, unit, suffix, date, config, languageCode, isLocalizedNumber);
+      }}
+    />
+  );
+};
+
+export function removeHtmlTags(str) {
+  if (str === null || str === "") return false;
+  else str = str.toString();
+
+  return str.replace(/(<([^>]+)>)/gi, "");
+}
+
+export const getSeparator = (separator, textColor) => {
+  if (separator === "divider") {
+    return <Divider color={textColor} />;
+  }
+  return <Dot color={textColor} />;
+};
+
+export function getStoryTemplate(story, config) {
+  const { "story-template": storyTemplate } = story;
+  const isCustomStory = !STORY_TEMPLATES.includes(storyTemplate);
+  const customStoryTemplate =
+    isCustomStory && get(config, ["customStory", `${camelCase(storyTemplate)}-story`, "storyType"], "text");
+  return isCustomStory ? kebabCase(customStoryTemplate) : storyTemplate;
+}
+
+export function getTimeStampConfig(qtConfig) {
+  const { dateFormat = "dd-mon-yyyy", localization = {}, timeFormat } = get(
+    qtConfig,
+    ["pagebuilder-config", "general"],
+    {}
+  );
+  const { enableLocalization = false, localizedElements = {} } = localization;
+
+  const timeStampConfig = {
+    isUpperCase: false,
+    disableMeridiem: false,
+    dateFormat,
+    timeFormat,
+    localizedMonths: enableLocalization && get(localizedElements, ["months"]),
+    localizedMeridiem: enableLocalization && get(localizedElements, ["meridiem"], {}),
+    enableLocalization
+  };
+
+  return timeStampConfig;
+}
+
+export const getTheme = (config, layout, enableDarkModePreview) => {
+  // Just add other layouts to suuport the border theme color calculations
+  const cardColorLayouts = ["sixColSixStories"];
+  // Check if layout is in cardColorLayouts, config.showCardBgColor is true, and config.border equals "aroundBorder"
+  if (cardColorLayouts.includes(layout) && config.showCardBgColor && config.border === "aroundBorder") {
+    // Choose between darkCardBgColor or cardBgColor based on enableDarkModePreview, fallback to config.theme
+    return enableDarkModePreview ? config.darkCardBgColor || config.theme : config.cardBgColor || config.theme;
+  }
+  // Return default theme if conditions are not met
+  return config.theme;
+};
+
+export function getIconColor(background) {
+  const iconColor = getTextColor(background) === "light" ? "#ffffff" : "#333333";
+  return iconColor;
+}
+
+export const getPath = (sketchesHost, relativePath) => {
+  try {
+    const { pathname } = new URL(sketchesHost);
+    if (pathname && pathname !== "/") {
+      return `${sketchesHost}${relativePath}`;
+    }
+    return relativePath;
+  } catch (err) {
+    console.log("Sketches host path error ---> ", err);
+    return relativePath;
+  }
+};
+
+export function infiniteStoryCards(infiniteScrollStyle) {
+  return infiniteScrollStyle === "read-more";
+}
+
+export function infiniteScrollDisabled(infiniteScrollType) {
+  if (!infiniteScrollType) return true;
+  return infiniteScrollType === "disabled";
+}
+
+export function isFallbackImgShown(isStoryPageImage, story, infiniteScrollType, infiniteScrollStyle) {
+  if (!isStoryPageImage) return true;
+  if (story?.firstStory) return false;
+  if (infiniteScrollDisabled(infiniteScrollType)) return false;
+  if (!infiniteScrollDisabled(infiniteScrollType) && !infiniteStoryCards(infiniteScrollStyle)) return false;
+  return true;
+}
+
+export function shouldShowAltImg(infiniteScrollType, infiniteScrollStyle, story) {
+  return !infiniteScrollDisabled(infiniteScrollType) && infiniteStoryCards(infiniteScrollStyle) && !story?.firstStory;
+}
+
+export function toRelativeUrl(absoluteUrl) {
+  try {
+    const url = new URL(absoluteUrl);
+    return url.pathname + url.search + url.hash;
+  } catch (error) {
+    console.error("Invalid URL:", error);
+    return null;
+  }
+}
+
+export function shouldEnableTTS({ isPbTTSEnabled, audioS3key, storyAccess, languageDirection, isPbStoryView }) {
+  if (languageDirection === "rtl") return false; // rtl not yet implemented
+  if (!(isPbTTSEnabled && audioS3key)) return false; // either of pb or bold toggles disabled
+  if (storyAccess && storyAccess?.accessGranted) return true; // premium story with access granted
+  if (!storyAccess) return true; // free story
+  if (isPbStoryView) return true; // PB UI shouldn't depend on premium or free story
+  return false;
+}