@capillarytech/cap-ui-utils 1.4.6-alpha.0 → 1.4.6-alpha2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capillarytech/cap-ui-utils",
-  "version": "1.4.6-alpha.0",
+  "version": "1.4.6-alpha2.0",
   "description": "Utility functions shared accross all the modules",
   "main": "index.js",
   "scripts": {

package/utils/withDemoVideosAndLinkHOC/index.js

@@ -1,27 +1,54 @@
 import React, { useState } from 'react';
 import ResizablePIP from './ResizablePIP';
+import PropTypes from "prop-types";
 
-const withDemoVideosAndLinks = (WrappedComponent, publicPath) => props => {
+/** 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 [showMaximised, setShowMaximised] = useState(false);
-  const {
-    demoVideoAndLinkJSONData: { demoVideoAndLinkJSON = {} } = {},
-    userData: {
-      user: { lang: userLocale = '' } = {},
-      currentOrgDetails: {
-        basicDetails: { base_language: orgLocale = '' } = {},
-      } = {},
-    } = {},
-    match: { path = '' } = {},
-  } = props || {};
-  const JSONInContext = demoVideoAndLinkJSON?.[publicPath];
-  const currentPathJSON = JSONInContext?.find(
-    routeEle => routeEle.route === path,
-  );
-  const locale = userLocale || orgLocale || 'default';
-
-  const targetElements = currentPathJSON?.target_elements;
   const cssSelectors = [];
   if (Object.keys(targetElements)?.length) {
     Object.keys(targetElements).map(targetElement => {
@@ -131,9 +158,14 @@ const withDemoVideosAndLinks = (WrappedComponent, publicPath) => props => {
           />
         </ResizablePIP>
       )}
-      <WrappedComponent {...props} />
+      {children}
     </div>
   );
 };
 
-export default withDemoVideosAndLinks;
+WithDemoVideosAndLinks.PropTypes = {
+  children: PropTypes.any,
+  locale: PropTypes.string,
+  targetElements: PropTypes.object,
+};
+export default WithDemoVideosAndLinks;