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

package/src/components/Molecules/SocialShareTemplate/index.js

@@ -1,299 +0,0 @@
-import React, { useEffect, useState, useRef } from "react";
-import PropTypes from "prop-types";
-import { socialShareData, ShareIcon } from "./social-share-data";
-import { SocialSharePopup } from "../../Atoms/SocialSharePopup";
-import { getTextColor } from "../../../utils/utils";
-import get from "lodash.get";
-import "./social-share-template.m.css";
-import { useSelector } from "react-redux";
-import camelCase from "lodash.camelcase";
-import { copyToClipboard, displayCopiedMsg } from "../../../utils/copy-link";
-
-const lockScroll = (overlayEnabled) => {
-  useEffect(() => {
-    // to disable scroll behind the overlay in mobile
-    const domBody = document?.body;
-    if (domBody) {
-      if (overlayEnabled) {
-        domBody.classList.add("lock-scroll");
-      } else {
-        domBody.classList.remove("lock-scroll");
-      }
-      return () => {
-        domBody.classList.remove("lock-scroll");
-      };
-    }
-  }, [overlayEnabled]);
-};
-
-const ShareItem = ({ name, url, icon, bgColor, socialShareStyle, direction, fixedToScreen = false }) => {
-  if (!url) return null;
-  const copylinkIconRef = useRef();
-  const copiedMessageRef = useRef();
-  if (name === "copylink") {
-    displayCopiedMsg(copylinkIconRef, copiedMessageRef, direction, fixedToScreen);
-    return (
-      <li
-        data-testid={name}
-        styleName="icon copylink"
-        style={socialShareStyle === "sticky" ? { backgroundColor: bgColor } : {}}
-        onClick={() => copyToClipboard(url)}
-        aria-label="copylink-share-icon"
-        ref={copylinkIconRef}>
-        {icon}
-        <div ref={copiedMessageRef} className="copied-msg hidden">
-          Copied
-        </div>
-      </li>
-    );
-  }
-  return (
-    <li data-testid={name} styleName="icon" style={socialShareStyle === "sticky" ? { backgroundColor: bgColor } : {}}>
-      <a href={url} target="_blank" rel="noopener noreferrer" aria-label={`${name}-share-icon`}>
-        {icon}
-      </a>
-    </li>
-  );
-};
-
-ShareItem.propTypes = {
-  name: PropTypes.string,
-  url: PropTypes.string,
-  icon: PropTypes.node,
-  bgColor: PropTypes.string,
-  socialShareStyle: PropTypes.string,
-  clickEvent: PropTypes.func
-};
-
-export const SocialShareTemplate = (props) => {
-  const { open = false, displayDefaultIcons = false } = props;
-  const {
-    socialShareIconsOrder,
-    socialIconsType: iconType = "circular-color-svg",
-    customShare,
-    shareIconType = "shareIcon3",
-    followUsOrder
-  } = useSelector((state) => get(state, ["qt", "config", "pagebuilder-config", "story", "pageSetting"], {}));
-  const updatedShareIconType = displayDefaultIcons ? "shareIcon3" : shareIconType;
-  const [popUpEnabled, setPopUp] = useState(open);
-  const defaultIconsOrder = ["whatsapp", "x", "facebook", "linkedin", "reddit", "email", "copylink"];
-  const updatedIconsOrder = displayDefaultIcons ? defaultIconsOrder : socialShareIconsOrder;
-  if (!updatedIconsOrder?.length) return null;
-  const {
-    fbUrl = "",
-    twitterUrl = "",
-    linkedinUrl = "",
-    whatsappUrl = "",
-    mailtoUrl = "",
-    redditUrl = "",
-    fullUrl,
-    theme,
-    fixedShareLayout = "partialShareIcons",
-    socialShareStyle = "fixed",
-    shareIconsOnly = false,
-    enableDarkMode
-  } = props;
-  const iconShade = getTextColor(theme);
-  const iconColor = iconShade === "dark" ? "#000000" : "#ffffff";
-  const iconBgColor = iconShade === "dark" ? "#ffffff" : "#000000";
-  const primaryColor =
-    useSelector((state) =>
-      enableDarkMode
-        ? get(state, ["qt", "config", "pagebuilder-config", "general", "darkPrimaryColor"])
-        : get(state, ["qt", "config", "pagebuilder-config", "general", "primaryColor"])
-    ) || "#bc346d";
-  const direction = useSelector((state) => get(state, ["qt", "config", "language", "direction"], "ltr"));
-  const shareIconShade = getTextColor(primaryColor) === "dark" ? "#000000" : "#ffffff";
-  const shareIconStyle = updatedShareIconType.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-  const options = {
-    fbUrl,
-    twitterUrl,
-    linkedinUrl,
-    whatsappUrl,
-    mailtoUrl,
-    fullUrl,
-    redditUrl,
-    iconColor: iconColor,
-    iconBgColor,
-    iconType: socialShareStyle === "sticky" ? "plain-color-svg" : iconType,
-    socialShareIconsOrder: updatedIconsOrder,
-    theme,
-    sticky: socialShareStyle === "sticky"
-  };
-  const iconsList = socialShareData(options);
-
-  useEffect(() => setPopUp(open), [open]);
-
-  lockScroll(popUpEnabled);
-
-  const popUp = (dataTestId, customPopupStyle) => (
-    <>
-      <div styleName="popup-overlay"></div>
-      <div styleName="popup-wrapper">
-        <SocialSharePopup
-          fbUrl={fbUrl}
-          twitterUrl={twitterUrl}
-          linkedinUrl={linkedinUrl}
-          whatsappUrl={whatsappUrl}
-          mailtoUrl={mailtoUrl}
-          redditUrl={redditUrl}
-          fullUrl={fullUrl}
-          iconType={displayDefaultIcons ? "circular-color-svg" : iconType}
-          socialShareIconsOrder={updatedIconsOrder}
-          theme={theme}
-          customShare={customShare}
-          dataTestId={dataTestId}
-          customPopupStyle={customPopupStyle}
-          closePopup={() => {
-            setPopUp(false);
-          }}
-        />
-      </div>
-    </>
-  );
-
-  const clickHandler = () => setPopUp(!popUpEnabled);
-
-  const SocialShareIcon = ({ iconsList, fixedShareLayout, clickHandler, popUpEnabled, customShare, iconColor }) => {
-    const renderIcon = ({
-      condition,
-      styleName,
-      iconColor,
-      shareLabel = "",
-      bgColor,
-      customPopup,
-      largeIcon = false,
-      textColor = ""
-    }) =>
-      condition && (
-        <>
-          <div styleName={styleName} onClick={clickHandler} style={{ backgroundColor: bgColor }} data-testid="share">
-            <ShareIcon color={iconColor} shareIconType={updatedShareIconType} largeIcon={largeIcon} />
-            {popUpEnabled && popUp(styleName, customPopup)}
-          </div>
-          {shareLabel && (
-            <span style={{ color: textColor }} onClick={clickHandler}>
-              {shareLabel}
-            </span>
-          )}
-        </>
-      );
-    // for share within cards
-    if (shareIconsOnly) {
-      return renderIcon({
-        condition: true,
-        styleName: `share-icon ${shareIconStyle}`,
-        iconColor: iconColor,
-        customPopup: true
-      });
-    }
-    // for sticky share
-    if (socialShareStyle === "sticky") {
-      return renderIcon({
-        condition: true,
-        styleName: `mobile-sticky-share ${shareIconStyle}`,
-        iconColor: "#fff",
-        bgColor: primaryColor,
-        largeIcon: true
-      });
-    }
-    // for fixed share
-    if (fixedShareLayout === "partialShareIcons") {
-      return (
-        <>
-          {renderIcon({ condition: iconsList.length > 2, styleName: `mobile-share ${shareIconStyle}`, iconColor })}
-          {renderIcon({ condition: iconsList.length > 5, styleName: `desktop-share ${shareIconStyle}`, iconColor })}
-        </>
-      );
-    }
-    if (fixedShareLayout === "shareButton") {
-      const options = {
-        condition: true,
-        styleName: `share-button ${shareIconStyle}`,
-        iconColor: shareIconShade,
-        shareLabel: customShare || "Share",
-        textColor: shareIconShade
-      };
-      return renderIcon(options);
-    }
-  };
-
-  const getIcons = () => {
-    if (shareIconsOnly) return null;
-    if (socialShareStyle === "sticky") {
-      return (
-        <ul data-test-id={camelCase(iconType)} styleName="icon-wrapper">
-          {iconsList.map((iconData, index) => (
-            <ShareItem {...iconData} key={iconData.name} socialShareStyle={socialShareStyle} direction={direction} />
-          ))}
-        </ul>
-      );
-    }
-    if (socialShareStyle === "fixed" && fixedShareLayout === "partialShareIcons") {
-      return (
-        <ul
-          data-test-id={camelCase(iconType)}
-          styleName={`icon-wrapper ${!followUsOrder?.length ? "max-icon" : "min-max-icon"}`}>
-          {iconsList.map((iconData, index) => (
-            <ShareItem
-              {...iconData}
-              key={iconData.name}
-              socialShareStyle={socialShareStyle}
-              direction={direction}
-              fixedToScreen={true}
-            />
-          ))}
-        </ul>
-      );
-    }
-    return null;
-  };
-
-  const styles =
-    socialShareStyle === "sticky"
-      ? `sticky ${iconShade}`
-      : fixedShareLayout === "partialShareIcons"
-      ? `fixed partial-icons-wrapper ${iconShade} ${!shareIconsOnly ? "margin-24" : ""}`
-      : `fixed ${
-          fixedShareLayout === "shareButton" && !shareIconsOnly ? "share-button-wrapper margin-24" : ""
-        } ${iconShade}`;
-  const shareIconShape = iconType === "square-svg" && !shareIconsOnly ? "square-icon" : "circular-icon";
-  const backgroundStyle =
-    (socialShareStyle === "fixed" && fixedShareLayout === "shareButton" && !shareIconsOnly) ||
-    socialShareStyle === "sticky"
-      ? { backgroundColor: primaryColor }
-      : {};
-
-  return (
-    <div
-      data-test-id={socialShareStyle}
-      className="arr--share"
-      styleName={`${styles} ${shareIconShape}`}
-      style={backgroundStyle}>
-      {getIcons()}
-      <SocialShareIcon
-        iconsList={iconsList}
-        fixedShareLayout={fixedShareLayout}
-        clickHandler={clickHandler}
-        popUpEnabled={popUpEnabled}
-        customShare={customShare}
-        iconColor={iconColor}
-      />
-    </div>
-  );
-};
-
-SocialShareTemplate.propTypes = {
-  fbUrl: PropTypes.string,
-  twitterUrl: PropTypes.string,
-  linkedinUrl: PropTypes.string,
-  whatsappUrl: PropTypes.string,
-  mailtoUrl: PropTypes.string,
-  redditUrl: PropTypes.string,
-  fullUrl: PropTypes.string,
-  theme: PropTypes.string,
-  socialShareStyle: PropTypes.string,
-  fixedShareLayout: PropTypes.string,
-  open: PropTypes.bool,
-  shareIconsOnly: PropTypes.bool
-};

package/src/components/Molecules/SocialShareTemplate/social-share-data.js

@@ -1,205 +0,0 @@
-import React from "react";
-
-import { Twitter as PlainTwitter } from "../../Svgs/SocialIcons/plain/twitter";
-import { Facebook as PlainFacebook } from "../../Svgs/SocialIcons/plain/facebook";
-import { LinkedIn as PlainLinkedIn } from "../../Svgs/SocialIcons/plain/linkedin";
-import { WhatsApp as PlainWhatsApp } from "../../Svgs/SocialIcons/plain/whatsapp";
-import { Email as PlainEmail } from "../../Svgs/SocialIcons/plain/email";
-import { Copylink as PlainCopylink } from "../../Svgs/SocialIcons/plain/copylink";
-import { Reddit as PlainReddit } from "../../Svgs/SocialIcons/plain/reddit";
-
-import { CircularColorFacebook } from "../../Svgs/SocialIcons/circular-color/facebook";
-import { CircularColorLinkedIn } from "../../Svgs/SocialIcons/circular-color/linkedin";
-import { CircularColorTwitter } from "../../Svgs/SocialIcons/circular-color/twitter";
-import { CircularColorWhatsApp } from "../../Svgs/SocialIcons/circular-color/whatsapp";
-import { CircularColorReddit } from "../../Svgs/SocialIcons/circular-color/reddit";
-import { CircularColorCopylink } from "../../Svgs/SocialIcons/circular-color/copylink";
-import { CircularColorEmail } from "../../Svgs/SocialIcons/circular-color/email";
-
-import { CircularPlainFacebook } from "../../Svgs/SocialIcons/circular-plain/facebook";
-import { CircularPlainLinkedIn } from "../../Svgs/SocialIcons/circular-plain/linkedin";
-import { CircularPlainTwitter } from "../../Svgs/SocialIcons/circular-plain/twitter";
-import { CircularPlainWhatsApp } from "../../Svgs/SocialIcons/circular-plain/whatsapp";
-import { CircularPlainCopylink } from "../../Svgs/SocialIcons/circular-plain/copylink";
-import { CircularPlainEmail } from "../../Svgs/SocialIcons/circular-plain/email";
-import { CircularPlainReddit } from "../../Svgs/SocialIcons/circular-plain/reddit";
-
-import { SquareFacebook } from "../../Svgs/SocialIcons/square/facebook";
-import { SquareLinkedIn } from "../../Svgs/SocialIcons/square/linkedin";
-import { SquareTwitter } from "../../Svgs/SocialIcons/square/twitter";
-import { SquareWhatsApp } from "../../Svgs/SocialIcons/square/whatsapp";
-import { SquareCopylink } from "../../Svgs/SocialIcons/square/copylink";
-import { SquareEmail } from "../../Svgs/SocialIcons/square/email";
-import { SquareReddit } from "../../Svgs/SocialIcons/square/reddit";
-
-import {
-  FilledArrowShareIcon,
-  OutlinedArrowShareIcon,
-  DotsConnectedShareIcon,
-  IPhoneShareIcon
-} from "../../Svgs/share-icon";
-import {
-  FilledArrowShareIcon as LargeFilledArrowShareIcon,
-  OutlinedArrowShareIcon as LargeOutlinedArrowShareIcon,
-  DotsConnectedShareIcon as LargeDotsConnectedShareIcon,
-  IPhoneShareIcon as LargeIPhoneShareIcon
-} from "../../Svgs/large-share-icon";
-
-const shareIconMapping = {
-  small: {
-    shareIcon1: FilledArrowShareIcon,
-    shareIcon2: OutlinedArrowShareIcon,
-    shareIcon3: DotsConnectedShareIcon,
-    shareIcon4: IPhoneShareIcon
-  },
-  large: {
-    shareIcon1: LargeFilledArrowShareIcon,
-    shareIcon2: LargeOutlinedArrowShareIcon,
-    shareIcon3: LargeDotsConnectedShareIcon,
-    shareIcon4: LargeIPhoneShareIcon
-  }
-};
-
-export const ShareIcon = ({ color, shareIconType, largeIcon = false }) => {
-  const size = largeIcon ? "large" : "small";
-  const IconComponent = shareIconMapping[size][shareIconType] || shareIconMapping[size].shareIcon1;
-
-  return <IconComponent color={color} />;
-};
-
-const getSocialIcons = (color, bgColor, iconType, sticky = false) => {
-  if (sticky) {
-    return {
-      facebook: <PlainFacebook color="#fff" />,
-      twitter: <PlainTwitter color="#fff" bgColor={bgColor} />,
-      linkedin: <PlainLinkedIn color="#fff" />,
-      whatsapp: <PlainWhatsApp color="#fff" />,
-      copylink: <PlainCopylink color="#fff" bgColor={bgColor} />,
-      email: <PlainEmail color="#fff" />,
-      reddit: <PlainReddit color="#fff" />
-    };
-  }
-  switch (iconType) {
-    case "circular-color-svg":
-      return {
-        facebook: <CircularColorFacebook />,
-        twitter: <CircularColorTwitter color={color} bgColor={bgColor} />,
-        linkedin: <CircularColorLinkedIn />,
-        whatsapp: <CircularColorWhatsApp />,
-        copylink: <CircularColorCopylink color={color} bgColor={bgColor} />,
-        email: <CircularColorEmail />,
-        reddit: <CircularColorReddit />
-      };
-    case "circular-plain-svg":
-      return {
-        facebook: <CircularPlainFacebook color={color} bgColor={bgColor} />,
-        twitter: <CircularPlainTwitter color={color} bgColor={bgColor} />,
-        linkedin: <CircularPlainLinkedIn color={color} bgColor={bgColor} />,
-        whatsapp: <CircularPlainWhatsApp color={color} bgColor={bgColor} />,
-        copylink: <CircularPlainCopylink color={color} bgColor={bgColor} />,
-        email: <CircularPlainEmail color={color} bgColor={bgColor} />,
-        reddit: <CircularPlainReddit color={color} bgColor={bgColor} />
-      };
-    case "square-svg":
-      return {
-        facebook: <SquareFacebook />,
-        twitter: <SquareTwitter color={color} bgColor={bgColor} />,
-        linkedin: <SquareLinkedIn />,
-        whatsapp: <SquareWhatsApp />,
-        copylink: <SquareCopylink color={color} bgColor={bgColor} />,
-        email: <SquareEmail />,
-        reddit: <SquareReddit />
-      };
-    case "plain-color-svg":
-      return {
-        facebook: <PlainFacebook />,
-        twitter: <PlainTwitter color={color} bgColor={bgColor} />,
-        linkedin: <PlainLinkedIn />,
-        whatsapp: <PlainWhatsApp />,
-        copylink: <PlainCopylink color={color} bgColor={bgColor} />,
-        email: <PlainEmail />,
-        reddit: <PlainReddit />
-      };
-    default:
-      return {
-        facebook: <PlainFacebook color={bgColor} bgColor={color} />,
-        twitter: <PlainTwitter color={color} />,
-        linkedin: <PlainLinkedIn color={bgColor} bgColor={color} />,
-        whatsapp: <PlainWhatsApp color={color} />,
-        copylink: <PlainCopylink color={color} />,
-        email: <PlainEmail color={color} />,
-        reddit: <PlainReddit color={color} />
-      };
-  }
-};
-
-export const socialShareData = ({
-  fbUrl,
-  twitterUrl,
-  linkedinUrl,
-  whatsappUrl,
-  mailtoUrl,
-  redditUrl,
-  fullUrl,
-  iconColor,
-  iconBgColor,
-  iconType = "plain-color-svg",
-  socialShareIconsOrder,
-  sticky = false
-}) => {
-  const socialIcons = getSocialIcons(iconColor, iconBgColor, iconType, sticky);
-
-  const possibleShareOptions = {
-    facebook: {
-      name: "facebook",
-      url: fbUrl,
-      icon: socialIcons["facebook"],
-      bgColor: "#1877F2",
-      alt: "fb icon"
-    },
-    whatsapp: {
-      name: "whatsapp",
-      url: whatsappUrl,
-      icon: socialIcons["whatsapp"],
-      bgColor: "#24D366",
-      alt: "whatsapp share"
-    },
-    x: {
-      name: "x",
-      url: twitterUrl,
-      icon: socialIcons["twitter"],
-      bgColor: "#000000",
-      alt: "twitter icon"
-    },
-    linkedin: {
-      name: "linkedin",
-      url: linkedinUrl,
-      icon: socialIcons["linkedin"],
-      bgColor: "#2867B2",
-      alt: "linkedin icon"
-    },
-    email: {
-      name: "email",
-      url: mailtoUrl,
-      icon: socialIcons["email"],
-      bgColor: "#D85B5B",
-      alt: "email icon"
-    },
-    reddit: {
-      name: "reddit",
-      url: redditUrl,
-      icon: socialIcons["reddit"],
-      bgColor: "#FD4A14",
-      alt: "reddit icon"
-    },
-    copylink: {
-      name: "copylink",
-      url: fullUrl,
-      icon: socialIcons["copylink"],
-      bgColor: "#000000",
-      alt: "copylink icon"
-    }
-  };
-
-  return socialShareIconsOrder.map((icon) => possibleShareOptions[icon]).filter((iconData) => iconData);
-};