@capillarytech/cap-ui-utils 1.4.11 → 1.4.13-alpha.0

package/index.js

@@ -7,3 +7,4 @@ export { default as formatter } from "./utils/formatter";
 export { default as validationHelper } from "./utils/validationHelper";
 export { default as loadable, FORCE_REFRESH_NOTIFIER, FORCE_REFRESH_SECONDS } from './utils/loadable';
 export { default as GTMTracker } from './utils/gtmTracker';
+export { default as compileHandlebars } from './utils/compileHandlebars';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capillarytech/cap-ui-utils",
-  "version": "1.4.11",
+  "version": "1.4.13-alpha.0",
   "description": "Utility functions shared accross all the modules",
   "main": "index.js",
   "scripts": {
@@ -8,11 +8,15 @@
   },
   "author": "Rajshekar",
   "dependencies": {
+    "@capillarytech/cap-ui-library": "4.1.15",
+    "prop-types": "^15.8.1",
     "react": "^16.13.0",
     "react-ga": "^2.7.0",
     "tti-polyfill": "^0.2.2",
     "moment-timezone": "^0.5.25",
     "react-intl": "2.7.2",
-    "lodash": "4.17.11"
+    "lodash": "4.17.11",
+    "react-resizable": "^3.0.4",
+    "handlebars": "4.0.11"
   }
 }

package/utils/compileHandlebars.js

@@ -0,0 +1,54 @@
+import Handlebars from 'handlebars';
+import moment from 'moment';
+import { unescape } from 'lodash-es';
+
+const DATE_FORMAT = 'YYYY-MM-DD';
+const DATE_FORMAT_DISPLAY = 'DD MMM, YYYY';
+
+// register helper functions
+Handlebars.registerHelper('makeBold', (name) => `<strong>${name}</strong>`);
+
+Handlebars.registerHelper('currentDate', () => moment().format(DATE_FORMAT));
+
+Handlebars.registerHelper('formatDate', (value, dtf = DATE_FORMAT_DISPLAY) => {
+  const dateValue = moment(value, DATE_FORMAT);
+  if (!dateValue.isValid()) return moment().format(dtf);
+  return dateValue.format(dtf);
+});
+
+Handlebars.registerHelper('compareDate', (value, compareWith, operator = 'equals') => {
+  let result = false;
+  const dateValue = resetTimeParams(moment(value, DATE_FORMAT));
+  const compareWithValue = resetTimeParams(moment(compareWith, DATE_FORMAT));
+  switch (operator) {
+    case 'equals': result = dateValue.diff(compareWithValue, 'day') === 0; break;
+    case 'greaterThan': result = dateValue.isAfter(compareWithValue); break;
+    case 'lessThan': result = dateValue.isBefore(compareWithValue); break;
+    case 'greaterThanEquals': result = (dateValue.isAfter(compareWithValue) || dateValue.diff(compareWithValue, 'day') === 0); break;
+    case 'lessThanEquals': result = (dateValue.isBefore(compareWithValue) || dateValue.diff(compareWithValue, 'day') === 0); break;
+    default: result = dateValue.diff(compareWithValue, 'day') === 0; break;
+  }
+  return result;
+});
+
+// util functions
+const resetTimeParams = (date) => date.hours(0).minutes(0).seconds(0).milliseconds(0);
+
+const replaceBraces = (str) => str
+  .replace(new RegExp('<%', 'g'), '{{')
+  .replace(new RegExp('%>', 'g'), '}}');
+
+// format and compile template
+const compileMessage = (template, context = {}) => {
+  try {
+    const compiledTemplate = Handlebars.compile(replaceBraces(template));
+    return unescape(compiledTemplate(context));
+  }
+  catch(err) {
+    const error = `[TemplateHandler util function] Error in template parsing: ${err}`;
+    console.error(error);
+    return error;
+  }
+};
+
+export default compileMessage;

package/utils/withDemoVideosAndLinkHOC/ResizablePIP.js

@@ -0,0 +1,174 @@
+import React, { useState } from "react";
+import { ResizableBox } from "react-resizable";
+import PropTypes from "prop-types";
+import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
+import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
+import CapLink from "@capillarytech/cap-ui-library/CapLink";
+import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
+import CapRow from "@capillarytech/cap-ui-library/CapRow";
+import Draggable from "react-draggable";
+import "react-resizable/css/styles.css";
+import { CapLabel } from "@capillarytech/cap-ui-library";
+
+const ResizablePIP = ({
+  children,
+  width = 400,
+  height = 310,
+  showMaximised = false,
+  handleShowMaximised,
+  minConstraints = [400, 310],
+  maxConstraints = [1104, 722],
+  closePIPContainer = () => {},
+  footerContent = {},
+}) => {
+  const [pipWidth, setPipWidth] = useState(width);
+  const [pipHeight, setPipHeight] = useState(height);
+  const [isHovering, setIsHovering] = useState(false);
+  const handleMouseEnter = () => setIsHovering(true);
+  const handleMouseLeave = () => setIsHovering(false);
+  const handleMaximiseView = () => {
+    if (!showMaximised) {
+      setPipWidth(1104);
+      setPipHeight(722);
+    } else {
+      setPipWidth(width);
+      setPipHeight(height);
+    }
+    handleShowMaximised(!showMaximised);
+  };
+
+  const handleOpenDoc = () => window.open(footerContent.supportDoc, "_blank");
+  return (
+    <Draggable handle="button">
+      <div
+        style={{
+          zIndex: "1000",
+          position: "absolute",
+          left: showMaximised ? 168 : 24,
+          top: showMaximised ? 60 : 450,
+          boxSizing: "content-box",
+          boxShadow:
+            "1px 3px 3px 0 rgb(0 0 0 / 20%), 1px 3px 15px 2px rgb(0 0 0 / 20%)",
+          borderRadius: 4,
+          backgroundColor: "#fff",
+        }}
+      >
+        {(isHovering || showMaximised) && (
+          <CapIcon
+            onClick={closePIPContainer}
+            size="m"
+            type="close"
+            style={{
+              position: "fixed",
+              top: showMaximised ? "-10px" : "10px",
+              left: showMaximised ? "1093px" : "365px",
+              backgroundColor: showMaximised ? "#dfe2e7" : "unset",
+              borderRadius: 48,
+              zIndex: 10001,
+            }}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          />
+        )}
+        <ResizableBox
+          onMouseDown={(e) => {
+            e.stopPropagation();
+          }}
+          width={pipWidth}
+          height={pipHeight}
+          minConstraints={minConstraints}
+          maxConstraints={maxConstraints}
+        >
+          <div
+            style={{
+              height: "calc(100% - 56px)",
+              opacity: isHovering ? 0.3 : 1,
+              color: "#000",
+              backgroundColor: "rgba(0, 0, 0, 0.3)",
+              transition: "opacity 0.5s ease-in-out",
+            }}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            {children}
+          </div>
+          <CapRow style={{ height: 56 }}>
+            <CapColumn span={17}>
+              <CapHeading style={{ margin: 18 }} type="h3">
+                {footerContent.videoTitle}
+              </CapHeading>
+            </CapColumn>
+            <CapLink
+              style={{
+                float: "right",
+                margin: "18px 18px 18px 0",
+              }}
+              onClick={handleOpenDoc}
+              title={
+                <CapHeading
+                  type="h5"
+                  style={{
+                    display: "flex",
+                    alignItems: "baseline",
+                    marginTop: 4,
+                  }}
+                >
+                  <CapLabel type="label15">View docs</CapLabel>
+                  <CapIcon
+                    onClick={handleOpenDoc}
+                    size="s"
+                    type="open-in-new"
+                  />
+                </CapHeading>
+              }
+            />
+          </CapRow>
+        </ResizableBox>
+        {isHovering && (
+          <div
+            style={{ position: "fixed" }}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            <CapIcon
+              onClick={handleMaximiseView}
+              size="s"
+              type="expander"
+              style={{
+                float: "right",
+                position: "fixed",
+                top: showMaximised ? 635 : 224,
+                right: 12,
+              }}
+            />
+            <button type="button">
+              <CapIcon
+                size="s"
+                type="draggable"
+                style={{
+                  float: "right",
+                  position: "fixed",
+                  top: showMaximised ? 635 : 224,
+                  right: 40,
+                }}
+              />
+            </button>
+          </div>
+        )}
+      </div>
+    </Draggable>
+  );
+};
+
+ResizablePIP.propTypes = {
+  children: PropTypes.any,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  minConstraints: PropTypes.array,
+  maxConstraints: PropTypes.array,
+  closePIPContainer: PropTypes.func,
+  handleShowMaximised: PropTypes.func,
+  showMaximised: PropTypes.bool,
+  footerContent: PropTypes.object,
+};
+export default ResizablePIP;

package/utils/withDemoVideosAndLinkHOC/index.js

@@ -0,0 +1,180 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import ResizablePIP from "./ResizablePIP";
+
+/** Sample targetElementsData
+ target_elements: {
+            '.loyalty-graph-header': {
+              support_link: {
+                target_url: {
+                  default: {
+                    label: 'Help default',
+                    href: 'https://app.storylane.io/share/v1ilsyhwno8m',
+                  },
+                  en: {
+                    label: 'Help',
+                    href: 'https://app.storylane.io/share/v1ilsyhwno8m',
+                  },
+                },
+                // icon: '',
+                // position: 'right',
+                // target_opening: '_blank',
+              },
+            },
+            '.performance-time-head-title': {
+              support_video: {
+                target_url: {
+                  default: {
+                    label: 'Demo',
+                    href: ' https://www.youtube.com/embed/JJI4eR-G5AM',
+                  },
+                  en: {
+                    label: 'Demo',
+                    href: ' https://www.youtube.com/embed/JJI4eR-G5AM',
+                  },
+                  'zh-CN': {
+                    label: '演示',
+                    href: ' https://www.youtube.com/embed/JJI4eR-G5AM',
+                  },
+                },
+                // icon: 'play',
+                // position: 'right', // right | left | top | bottom
+                // target_opening: '_blank',
+              },
+            },
+          },
+ */
+const WithDemoVideosAndLinks = (props) => {
+  const { children, targetElements, locale = "en" } = props;
+  const [showPIP, setShowPIP] = useState(false);
+  const [PIPContentLink, setPIPContentLink] = useState("");
+  const [PIPFooterContent, setPIPFooterContent] = useState({});
+  const [showMaximised, setShowMaximised] = useState(false);
+  const cssSelectors = [];
+  if (Object.keys(targetElements || {})?.length) {
+    Object.keys(targetElements).map((targetElement) => {
+      cssSelectors.push({
+        cssSelector: targetElement,
+        locale,
+        ...targetElements[targetElement],
+      });
+    });
+  }
+
+  cssSelectors.forEach((selector) => {
+    const {
+      support_link: { target_url: linkTargetUrl = {} } = {},
+      support_video: { target_url: videoTargetUrl = {} } = {},
+      locale,
+      cssSelector,
+    } = selector || {};
+    let matchedNodes = document.querySelectorAll(selector.cssSelector);
+    const handleOnClickVideoLink = () => {
+      setPIPContentLink(videoTargetUrl?.[locale]?.href);
+      setPIPFooterContent({
+        videoTitle: videoTargetUrl?.[locale]?.videoTitle,
+        supportDoc: videoTargetUrl?.[locale]?.supportDoc,
+      });
+      setShowPIP(true);
+    };
+    const handleOpenSupportLink = () =>
+      window.open(linkTargetUrl?.[locale]?.href, "_blank");
+
+    if (selector?.support_video?.target_url?.default?.href) {
+      matchedNodes.forEach((node) => {
+        if (!document.getElementById(`demo-video-${cssSelector}`)) {
+          let videoAnchor = document.createElement("a");
+          videoAnchor.textContent = videoTargetUrl?.[locale].label;
+          videoAnchor.id = `demo-video-${cssSelector}`;
+          videoAnchor.style.marginLeft = "2px";
+          videoAnchor.onclick = handleOnClickVideoLink;
+
+          const videoIconElement = document.createElement("i");
+          videoIconElement.innerHTML = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
+            <path
+              d="M14.756 11.032a1.194 1.194 0 0 1 0 1.921l-2.937 2.17a1.194 1.194 0 0 1-1.904-.96v-4.34a1.194 1.194 0 0 1 1.904-.96l2.937 2.17zM12 19a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm0 2a9 9 0 1 1 0-18 9 9 0 0 1 0 18z"
+              id="play_svg__a"
+            ></path>
+          </svg>`;
+          videoIconElement.onclick = handleOnClickVideoLink;
+          videoIconElement.style.marginLeft = "2px";
+          videoIconElement.style.cursor = "pointer";
+          videoIconElement.style.color = "#2466eb";
+          videoIconElement.style.fontSize = "18px";
+          node.appendChild(videoIconElement);
+          node.appendChild(videoAnchor);
+        }
+      });
+    } else if (selector?.support_link?.target_url?.default?.href) {
+      matchedNodes.forEach((node) => {
+        if (!document.getElementById(`support-link-${cssSelector}`)) {
+          let linkAnchor = document.createElement("a");
+          linkAnchor.href = linkTargetUrl?.[locale]?.href;
+          linkAnchor.textContent = linkTargetUrl?.[locale].label;
+          linkAnchor.target = "_blank";
+          linkAnchor.id = `support-link-${cssSelector}`;
+          linkAnchor.style.marginLeft = "2px";
+          linkAnchor.onclick = handleOpenSupportLink;
+
+          const helpIconElement = document.createElement("i");
+          helpIconElement.innerHTML = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
+          <path
+            id="help_svg__a"
+            d="M9 16h2v-2H9v2zm1-16C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14C7.79 4 6 5.79 6 8h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
+          ></path>
+        </svg>`;
+          helpIconElement.onclick = handleOpenSupportLink;
+          helpIconElement.style.marginLeft = "2px";
+          helpIconElement.style.cursor = "pointer";
+          helpIconElement.style.fontSize = "16px";
+          helpIconElement.style.color = "#2466eb";
+
+          node.appendChild(helpIconElement);
+          node.appendChild(linkAnchor);
+        }
+      });
+    }
+  });
+
+  const handleOpenInNew = () => {
+    window.open(PIPContentLink, "_blank");
+  };
+  const handleShowMaximised = (value) => {
+    setShowMaximised(value);
+  };
+  const handleClosePIPContainer = () => {
+    setShowMaximised(false);
+    setShowPIP(false);
+  };
+  return (
+    <div>
+      {showPIP && (
+        <ResizablePIP
+          closePIPContainer={handleClosePIPContainer}
+          handleOpenInNew={handleOpenInNew}
+          handleShowMaximised={handleShowMaximised}
+          showMaximised={showMaximised}
+          footerContent={PIPFooterContent}
+        >
+          <iframe
+            width="100%"
+            height="100%"
+            src={`${PIPContentLink}?controls=0`}
+            title="YouTube video player"
+            frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            style={{ borderRadius: 4 }}
+          />
+        </ResizablePIP>
+      )}
+      {children}
+    </div>
+  );
+};
+
+WithDemoVideosAndLinks.propTypes = {
+  children: PropTypes.any,
+  locale: PropTypes.string,
+  targetElements: PropTypes.object,
+};
+export default WithDemoVideosAndLinks;