@quintype/arrow 3.54.1-version-upgrade.1 → 3.54.1-version-upgrade.2

package/src/utils/utils.js

@@ -1,615 +0,0 @@
-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;
-}