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

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

@@ -0,0 +1,299 @@
+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

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