Merge pull request #422 from wrappid/WRPD-enhancement-421

feat(core): ✨ made CoreContactLink component
wrappid · Nov 21, 2024 · 66d12c8 · 66d12c8
2 parents ab3e23b + cbb72f6
commit 66d12c8
Show file tree

Hide file tree

Showing 10 changed files with 179 additions and 192 deletions.
diff --git a/package/CoreRoutes.js b/package/CoreRoutes.js
@@ -4,7 +4,7 @@ import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 
 import { CoreRoutesContext } from "./config/contextHandler";
-import { CoreDomRoute, CoreDomRoutes, coreUseLocation, coreUseNavigate } from "./helper/routerHelper";
+import { CoreDomRoute, CoreDomRoutes, coreUseNavigate } from "./helper/routerHelper";
 import PageContainer from "./layout/PageContainer";
 
 const DEFAULT_ROUTE = {

diff --git a/package/components/dataDisplay/CoreContactLink.js b/package/components/dataDisplay/CoreContactLink.js
@@ -0,0 +1,143 @@
+// eslint-disable-next-line unused-imports/no-unused-imports, no-unused-vars
+import React from "react";
+
+import CoreIcon, { __IconTypes } from "./CoreIcon";
+import CoreIconText from "./CoreIconText";
+import CoreTooltip from "./CoreTooltip";
+import CoreClasses from "../../styles/CoreClasses";
+import { sanitizeComponentProps } from "../../utils/componentUtil";
+import { maskEmailOrPhone } from "../../utils/stringUtils";
+import CoreLink from "../navigation/CoreLink";
+
+export default function CoreContactLink(props) {
+  props = sanitizeComponentProps(CoreContactLink, props);
+
+  const {
+    variant = "mail", // "mail", "phone", "sms", etc.
+    contact,
+    limitChars = 30,
+    verified,
+    tooltipPlacement = "bottom",
+    size,
+    mask = false,
+    iconButton = false,
+    icon, 
+    unavailableText = "Not Available",
+    naText = "NA",
+  } = props;
+
+  // Default values based on the variant prop
+  const variantConfig = {
+    link: {
+      defaultIcon    : "link",
+      naText         : "No Link",
+      protocol       : "http",
+      unavailableText: "No Link",
+    },
+    mail: {
+      defaultIcon    : "mail",
+      naText         : "No Email",
+      protocol       : "mailto",
+      unavailableText: "No Email",
+    },
+    phone: {
+      defaultIcon    : "call",
+      naText         : "No Phone Number",
+      protocol       : "tel",
+      unavailableText: "No Phone Number",
+    },
+    sms: {
+      defaultIcon    : "sms",
+      naText         : "No SMS Number",
+      protocol       : "sms",
+      unavailableText: "No SMS Number",
+    },
+  };
+
+  const { protocol, defaultIcon, unavailableText: defaultUnavailableText, naText: defaultNaText } = variantConfig[variant] || variantConfig.mail;
+
+  const finalIcon = icon || defaultIcon;
+  const finalUnavailableText = unavailableText || defaultUnavailableText;
+  const finalNaText = naText || defaultNaText;
+
+  const renderContactLinkComp = () => {
+    return (
+      <>
+        {contact ? (
+          iconButton ? (
+            <CoreLink href={`${protocol}:${contact}`}>
+              <CoreIcon
+                type={__IconTypes.MATERIAL_OUTLINED_ICON}
+                styleClasses={[CoreClasses.COLOR.TEXT_PRIMARY]}
+                icon={finalIcon}
+              />
+            </CoreLink>
+          ) : (
+            <CoreIconText
+              href={`${protocol}:${contact}`}
+              limitChars={limitChars}
+              hideSeeMore={true}
+              type={__IconTypes.MATERIAL_OUTLINED_ICON}
+              size={size}
+              link={true}
+              text={mask ? maskEmailOrPhone(contact) : contact}
+              icon={finalIcon}
+              tailIconColor={
+                contact && verified !== undefined && verified
+                  ? [CoreClasses?.ICON?.VERIFIED_SUCCESS]
+                  : [CoreClasses?.ICON?.VERIFIED_WARNING]
+              }
+              tailIcon={
+                contact && verified !== undefined
+                  ? verified
+                    ? "verified"
+                    : "" /** @todo if not verified then a button that call a function that can help verified */
+                    // : "error_outline"
+                  : null
+              }
+            />
+          )
+        ) : iconButton ? (
+          <CoreIconText
+            type={__IconTypes.MATERIAL_OUTLINED_ICON}
+            icon={finalIcon}
+            text={finalNaText}
+          />
+        ) : (
+          <CoreIconText
+            type={__IconTypes.MATERIAL_OUTLINED_ICON}
+            icon={finalIcon}
+            text={finalUnavailableText}
+          />
+        )}
+      </>
+    );
+  };
+
+  return (
+    <>
+      {contact && contact.length > limitChars ? (
+        <CoreTooltip title={contact} arrow placement={tooltipPlacement}>
+          {renderContactLinkComp()}
+        </CoreTooltip>
+      ) : (
+        <>{renderContactLinkComp()}</>
+      )}
+    </>
+  );
+}
+
+export const commonContactLinkProps = [
+  { description: "Maximum number of characters to display before truncating. If exceeded, full text will be shown in tooltip.", name: "limitChars", types: [{ default: 30, type: "number" }] },
+  { description: "Indicates if the contact information is verified. Shows verification status icon when set.", name: "verified", types: [{ type: "boolean" }] },
+  { description: "Controls the placement of the tooltip when contact text is truncated.", name: "tooltipPlacement", types: [{ default: "bottom", type: "string" }] },
+  { description: "Controls the size of the component.", name: "size", types: [{ type: "string" }] },
+  { description: "Custom icon to override the default variant icon.", name: "icon", types: [{ type: "string" }] },
+  { description: "When true, masks the contact information for privacy (applies to email and phone numbers).", name: "mask", types: [{ default: false, type: "boolean" }] },
+  { description: "When true, displays only the icon as a clickable button without the text.", name: "iconButton", types: [{ default: false, type: "boolean" }] },
+  { description: "Text to display when contact information is not provided.", name: "unavailableText", types: [{ default: "Not Available", type: "string" }] },
+  { description: "Short text to display when showing icon-only view without contact information.", name: "naText", types: [{ default: "NA", type: "string" }] }
+];
+
+CoreContactLink.validProps = [{ description: "Determines the type of contact link to render. Each variant has its own configuration for icon and protocol.", name: "variant", types: [{ type: "string", validValues: ["mail", "phone", "sms", "link"] }] }, { description: "The contact information to display and link to (email address, phone number, URL, etc.)", name: "contact", types: [{ type: "string" }] }, ...commonContactLinkProps];
+CoreContactLink.invalidProps = [];
diff --git a/package/components/dataDisplay/CoreEmailLink.js b/package/components/dataDisplay/CoreEmailLink.js
@@ -1,100 +1,21 @@
 // eslint-disable-next-line unused-imports/no-unused-imports, no-unused-vars
 import React from "react";
 
-import CoreIcon, { __IconTypes } from "./CoreIcon";
-import CoreIconText from "./CoreIconText";
-import CoreTooltip from "./CoreTooltip";
-import CoreClasses from "../../styles/CoreClasses";
+import CoreContactLink, { commonContactLinkProps } from "./CoreContactLink";
 import { sanitizeComponentProps } from "../../utils/componentUtil";
-import { maskEmailOrPhone } from "../../utils/stringUtils";
-import CoreLink from "../navigation/CoreLink";
 
 export default function CoreEmailLink(props) {
   props = sanitizeComponentProps(CoreEmailLink, props);
-  const {
-    limitChars = 30,
-    email,
-    verified,
-    tooltipPlacement = "bottom",
-    size,
-    mask = false,
-    iconButton = false,
-  } = props;
-
-  const renderEmailLinkComp = () => {
-    return (
-      <>
-        {email ? (
-          iconButton ? (
-            <CoreLink href={`mailto:${email}`}>
-              <CoreIcon
-                type={__IconTypes.MATERIAL_OUTLINED_ICON}
-                styleClasses={[CoreClasses.COLOR.TEXT_PRIMARY]}
-              >
-                mail
-              </CoreIcon>
-            </CoreLink>
-          ) : (
-            <CoreIconText
-              href={`mailto:${email}`}
-              limitChars={limitChars}
-              hideSeeMore={true}
-              type={__IconTypes.MATERIAL_OUTLINED_ICON}
-              size={size}
-              link={true}
-              text={mask ? maskEmailOrPhone(email) : email}
-              icon="mail"
-              tailIconColor={
-                email && verified !== undefined && verified
-                  ? [CoreClasses?.ICON?.VERIFIED_SUCCESS]
-                  : [CoreClasses?.ICON?.VERIFIED_WARNING]
-              }
-              tailIcon={
-                email && verified !== undefined
-                  ? verified
-                    ? "verified"
-                    : "error_outline"
-                  : null
-              }
-            />
-          )
-        ) : iconButton ? (
-          <CoreIconText
-            type={__IconTypes.MATERIAL_OUTLINED_ICON}
-            icon="email"
-            text={"NA"}
-          />
-        ) : (
-          <CoreIconText
-            type={__IconTypes.MATERIAL_OUTLINED_ICON}
-            icon="email"
-            text={"Not Available"}
-          />
-        )}
-      </>
-    );
-  };
+  const { email, ...restProps } = props;
 
   return (
-    <>
-      {email && email.length > limitChars ? (
-        <CoreTooltip title={email} arrow placement={tooltipPlacement}>
-          {renderEmailLinkComp()}
-        </CoreTooltip>
-      ) : (
-        <>{renderEmailLinkComp()}</>
-      )}
-    </>
+    <CoreContactLink
+      {...restProps} 
+      variant="mail" 
+      contact={email} 
+    />
   );
 }
 
-CoreEmailLink.validProps = [
-  { name: "limitChars", types: [{ default: 30, type: "number" }] },
-  { name: "email", types: [{ type: "string" }] },
-  { name: "verified", types: [{ type: "boolean" }] },
-  { name: "tooltipPlacement", types: [{ default: "bottom", type: "string" }] },
-  { name: "size", types: [{ type: "string" }] },
-  { name: "mask", types: [{ default: false, type: "boolean" }] },
-  { name: "iconButton", types: [{ default: false, type: "boolean" }] }
-];
+CoreEmailLink.validProps = [{ description: "The email address to display and link to.", name: "email", types: [{ type: "string" }] }, ...commonContactLinkProps];
 CoreEmailLink.invalidProps = [];
diff --git a/package/components/dataDisplay/CorePhoneLink.js b/package/components/dataDisplay/CorePhoneLink.js
@@ -1,103 +1,21 @@
 // eslint-disable-next-line unused-imports/no-unused-imports, no-unused-vars
 import React from "react";
 
-import CoreIcon, { __IconTypes } from "./CoreIcon";
-import CoreIconText from "./CoreIconText";
-import CoreTooltip from "./CoreTooltip";
-import CoreClasses from "../../styles/CoreClasses";
+import CoreContactLink, { commonContactLinkProps } from "./CoreContactLink";
 import { sanitizeComponentProps } from "../../utils/componentUtil";
-import { maskEmailOrPhone } from "../../utils/stringUtils";
-import CoreLink from "../navigation/CoreLink";
 
 export default function CorePhoneLink(props) {
   props = sanitizeComponentProps(CorePhoneLink, props);
-  const {
-    limitChars = 30,
-    phone,
-    verified,
-    tooltipPlacement = "bottom",
-    size,
-    mask = false,
-    iconButton = false,
-  } = props;
-
-  const renderPhoneLinkComp = () => {
-    return (
-      <>
-        {phone ? (
-          iconButton ? (
-            <CoreLink href={`tel:${phone}`}>
-              <CoreIcon
-                type={__IconTypes.MATERIAL_OUTLINED_ICON}
-                styleClasses={[CoreClasses.COLOR.TEXT_PRIMARY]}>
-                call
-              </CoreIcon>
-            </CoreLink>
-          ) : (
-            <CoreIconText
-              styleClasses={[CoreClasses?.NAVIGATION?.PHONE_EMAIL_LINK]}
-              link={true}
-              href={`tel:${phone}`}
-              limitChars={limitChars}
-              hideSeeMore={true}
-              type={__IconTypes.MATERIAL_OUTLINED_ICON}
-              size={size}
-              text={mask ? maskEmailOrPhone(phone) : phone}
-              icon="call"
-              tailIconColor={
-                phone && verified !== undefined && verified 
-                  ? [CoreClasses?.ICON?.VERIFIED_SUCCESS]
-                  : [CoreClasses?.ICON?.VERIFIED_WARNING]
-              }
-              tailIcon={
-                phone && verified !== undefined
-                  ? verified
-                    ? "verified"
-                    : "error_outline"
-                  : null
-              }
-            />
-          )
-        ) : iconButton ? (
-          <CoreIconText
-            type={__IconTypes.MATERIAL_OUTLINED_ICON}
-            icon="call"
-            text={"NA"}
-          />
-        ) : (
-          <CoreIconText
-            type={__IconTypes.MATERIAL_OUTLINED_ICON}
-            icon="call"
-            text={"Not Available"}
-          />
-        )}
-      </>
-    );
-  };
+  const { phone, ...restProps } = props;
 
   return (
-    <>
-      {phone && phone.length > limitChars ? (
-        <CoreTooltip title={phone} arrow placement={tooltipPlacement}>
-          {renderPhoneLinkComp()}
-        </CoreTooltip>
-      ) : (
-        <>{renderPhoneLinkComp()}</>
-      )}
-    </>
+    <CoreContactLink
+      {...restProps} 
+      variant="phone" 
+      contact={phone} 
+    />
   );
 }
 
-CorePhoneLink.validProps = [
-  { name: "limitChars", types: [{ default: 30, type: "number" }] },
-  { name: "verified", types: [{ default: true, type: "boolean", validValues: [true, false] }] },
-  { name: "tooltipPlacement", types: [{ default: "bottom", type: "string" }] },
-  { name: "mask", types: [{ default: false, type: "boolean", validValues: [true, false] }] },
-  { name: "iconButton", types: [{ default: false, type: "boolean", validValues: [true, false] }] },
-  { name: "phone", types: [{ type: "string" }] },
-  {
-    name : "sizes",
-    types: [{ type: "string" }] 
-  },
-];
+CorePhoneLink.validProps = [{ description: "The phone number to display and link to.", name: "phone", types: [{ type: "string" }] }, ...commonContactLinkProps];
 CorePhoneLink.invalidProps = [];