@capillarytech/cap-ui-utils 1.4.6-alpha8.0 → 1.4.6

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.6-alpha8.0",
+  "version": "1.4.6",
   "description": "Utility functions shared accross all the modules",
   "main": "index.js",
   "scripts": {
@@ -8,14 +8,12 @@
   },
   "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",
-    "react-resizable": "^3.0.4"
+    "handlebars": "4.0.11"
   }
 }

package/utils/compileHandlebars.js

@@ -0,0 +1,49 @@
+import Handlebars from 'handlebars';
+import moment from 'moment';
+
+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;
+  }
+});
+
+// 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 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

@@ -1,166 +0,0 @@
-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";
-
-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">
-                  View docs
-                  <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="open-in-new"
-              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

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